• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Dreamweaver clip a video to fit in a banner

New Here ,
Jun 08, 2020 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.

Views

488

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
community guidelines
Community Expert ,
Jun 08, 2020 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/

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Jun 09, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Jun 09, 2020 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.

Votes

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
community guidelines
New Here ,
Jun 09, 2020 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.]

Votes

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
community guidelines
Participant ,
Jun 09, 2020 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.

Votes

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
community guidelines
New Here ,
Jun 09, 2020 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.]

Votes

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
community guidelines
Community Expert ,
Jun 09, 2020 Jun 09, 2020

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines