BG Video expanding beyond container

Design help General
#1

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)

#2

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

#3

Hi @QA_Brandon

Link updated.

#4

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

#5

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.

#6

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

#7

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

#8

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

#9

Thanks tho still not getting desired results on either

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

#10

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.

#11

I’ll give grid a shot.

Thanks @webdev!