Embedded Video Aspect Ratio

Design help General
1

Need some help.

I have a button that reveals a video on click but when the video appears it’s aspect ratio is maintained within the window forcing the background video behind it to show through top and bottom or left and right depending on the window proportions.

Is there a way to format the video so it fills the window 100vh and 100vw so the background video is fully covered? Similarly to how the background video is cropped full frame.

https://preview.webflow.com/preview/supa-d8c0b4?utm_medium=preview_link&utm_source=designer&utm_content=supa-d8c0b4&preview=1efbf72e765c3f21439bd9c44974301d&pageId=5e0e77ca77ff44f02d660a7b&mode=preview

One week into webflow and struggling.

Thanks in advance.

Neil

2

I think this may be a result of magic padding. Anyone know how to override that?

3

Hi Neil, you might use some custom code to apply an object-fit css styling on the embedded video, see here: HTML 5 Video stretch - Stack Overflow

Also, you might also try applying a scale to the video embed as discussed in the stackoverflow article, I am not sure how that would work on an embedded video with scale applied to embed widget, I looked at the page and it seems the videos there were using bg video widget and video widget, are you using an html code embed, or only Webflow video widgets?

Can you share a screenshot of the video in question in the navigator?

4

The solution on this post should do the trick: