Background video resize

Hello,
times I built a video background. File is relatively light only 250kb at 1920x1080 px.
It would be nice if the video would shrink proportionally - I can’t get it set via “video”.

try this)

1 Like

thankyou, i would prefer to make it in blocs
(create responsive websites without writing code…)

I would avoid using Material Design docs, although the video embed classes are standard Bootstrap 4 on that page, they don’t apply to a video thats being used as a background.

@Piet, looks like you have content over the video, that will determine the size of the element the video is a background of.

No Code is not exhaustive with any app to be fair.

1 Like

Sorry, but I had to post this:

The Ultimate Mac

Website Builder

Blocs is fast, intuitive and powerful visual web design software, that lets you create responsive websites without writing code.

3 Likes

Hi @Piet, where can we see the site live? I’m trying to understand your problem but find difficulties. When a video is set as background it will shrink proportionally as long as you follow your 1920x1080 ratio (a dimension set by yourself and not Blocs) when shrinking. For obvious reasons, a background video will never be able to shrink to, for example, the 300x600 ratio. If you want to achieve this you will need to add different video ratios for different breakpoints. Exactly the same applies to images.

1 Like

That’s a 100% correct statement! :sunglasses:

2 Likes

Thank you !

This is how I imagine it: automatic reduction, like a normal background photo. Bevor the video text, cartdesigner etc.

https://mdbootstrap.com/previews/docs/latest/html/carousel/video/index.html

(without carousell settings)

Hi @Piet,

I’m not seeing any difference between the MD Bootstrap website and how the same video behaves in Blocs. Please advise if I’m doing something wrong.

MDBootstrap Website:

and Blocs:

1 Like

Forum – thankyou for the support – especially @Jerry

1 Like

Thanks, @Piet, we’re all here to support! Do not hesitate to ask more questions if needed.

1 Like