Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I usually have the video in the background as per this example:
https://startbootstrap.com/snippets/video-header/
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.]
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Static image for phone is a good idea. Thanks for your help!
Cheers,
Richard Knight
[Personal information removed by moderator.]
Copy link to clipboard
Copied
This is a public web forum. Please do not post personal information in a public forum where it would be exploited.
Suggest you refrain from using personal e-mail to reply or remove your e-mail signature. Thanks.