Skip to main content
Participant
June 8, 2020
Question

Dreamweaver clip a video to fit in a banner

  • June 8, 2020
  • 3 replies
  • 608 views

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 has been closed for replies.

3 replies

June 9, 2020

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.

Participant
June 9, 2020

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.]

June 9, 2020

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.

Nancy OShea
Community Expert
Community Expert
June 9, 2020

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. 

 

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
Community Expert
June 9, 2020

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

 

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

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