Make Video Stretch to Width of Webpage

[Verissimo]

Verissimo,

Thank you for sharing your example here which I had a play with. Unfortunately, were a designer to opt to use the export option Scale-to-fit-Width there is a conflict between stretching a placeholder that contains a video and the option StfW e.g.



If you toggle StfW on and off you will see the conflict. Some designers would not be concerned with not using StfW, but it is very useful to many.

You video is sized as 1920 x 1080, but when previewed it has black bars top and bottom which can be seen when one adjusts the browser width. I took the liberty to remove these by cropping the video to 1920 x 824. The black bars are now gone and the file size is reduced from 41mb to 10mb:

https://initiostar.co.uk/demo/banner...s/1920-824.mp4

I modified a previous banner video demo to accommodate your video e.g. https://initiostar.co.uk/demo/banner-vid/

One can see StfW working across both a mobile and desktop variant where the desktop transitions to a proportionally sized video on the mobile variant.

There are no doubt many more ways to do this, but this would be my take on it.

Banner Video and Variants.xar

Maybe it helps if you want to consider Scale-to-fit-Width?

The original demo is here: https://initiostar.co.uk/demo/Video/banner.htm

Thanks a lot, I was "fighting" with those black bars. The way I found to deal with it is by hidde them with some text bar, but I guess it would always have problems, so, this is great.
Also, I assume that in order for the video scroll up just have to change position: fixed; to absolute, right?