Streaming live at 10am (PST)

BG Video expanding beyond container

I’m tryna have some BG videos contained in a wrapper (relative 100% x 100% (auto)), looks good but when I preview the video seems to expand/zoom out beyond the container, cutting off the borders.

any suggestions?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @andreswaby,

Can you send us your share link as well as a live link for this project?

It could be as simple as a setting but without your links I dont know where to help you.

TIA

Hi @WebDev_Brandon

Link updated.

Mind sharing a video showing the issue? Would be very helpful.

Hi @webdev

On my website andreswabycreative.studio, under creative thinking is a set of BG videos.

In designer mode the videos fit div size as intended, however when previewed/published they magnify.

The project link is also posted above.

So you want the video’s to maintain the aspect ratio of the source?

… of the video-wrapper. To fit within the thumbnail sized div.

Add padding-top: 56.25%. See -> https://css-tricks.com/aspect-ratio-boxes/

Thanks tho still not getting desired results on either

am I adding that to the wrapper or BG video element?

Unfortunately, that padding (applied to video parent) is going to create havoc with your current layout based on choices you have made.

I would create a new container, work out your video issues, then start adding in your design elements. I would probably look at a grid.

I’ll give grid a shot.

Thanks @webdev!