Skip to main content
Participant
Jun 8, 2020 11:45 PM UTC
Question

Dreamweaver clip a video to fit in a banner

Does anyone know how to clip a video so that it fits inside a banner at the top of my page. I've tried cropping it to 1280 x 640 in Premiere Pro but I get black borders on top and bottom. I've tried "overflow: hidden", "height = __ vh", "transform: translateY(-50%). That one sort of worked.

This topic is closed to new replies. Start a new post to keep the conversation going.

7 replies

Jun 9, 2020 9:08 PM UTC

I'm not aware that you can clip videos to just any size. I think they have to be in some kind of standard aspect ratio.

 

You can certainly insert a video in a <div></div> which is set to a specific height and crop it by using overflow hidden on the videos parent container BUT the video would have to be able to withstand the severe automated cropping so it still made visual sense, which means the video would really require a central focused viewpoint.

Translate
Participant
Jun 9, 2020 9:15 PM UTC

Thanks for your help. I was able achieve my goal by just putting div just
below it. It covers the bottom of the video. I'm not sure how that's going
to look when I put in the tablet and mobile queries. I'll have to wait and
see.

Cheers,

Richard Knight
[Personal information removed by moderator.]

Translate
Jun 9, 2020 9:22 PM UTC

It sounds as though your solution could work - probably for phone you might want to consider swapping the video for a static image.

 

Good luck with the project. If you require any additional help with the video issue post back.

Translate
Nancy OShea
Community Expert
Community Expert
Jun 9, 2020 7:44 PM UTC

First determine the video's aspect ratio -- 3:2, 4:3, 16:9 or 21:9, etc...

 

Parent container height & width should be proportioned accordingly. 

3:2 = 1280 x 853.33,

4:3 = 1280 x 960,

16:9 = 1280 x 760,

21:9 = 1280 x 548.57.

 

If video contains an audio track, video should be placed in the foreground with player controls. 

 

Translate
Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
Community Expert
Jun 9, 2020 12:41 AM UTC

I usually have the video in the background as per this example:

 

https://startbootstrap.com/snippets/video-header/

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!