Highlighted

Dreamweaver clip a video to fit in a banner

New Here ,
Jun 08, 2020

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.

Topics

Creative Cloud

Views

324

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dreamweaver clip a video to fit in a banner

New Here ,
Jun 08, 2020

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.

Topics

Creative Cloud

Views

325

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 08, 2020

Copy link to clipboard

Copied

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

 

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 09, 2020

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. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 09, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 09, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jun 09, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 09, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 09, 2020

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.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...