Full Browser Width Video Background HTML/CSS

I am trying to source/identify the correct HTML/ CSS to display an autoplay loop banner video such that it extends to the full width of the browser.

Right now, it sits perfectly on the page (1200px wide) and I can crop the height of the video no problem to my chosen pixels to achieve a banner. The effect I am trying to achieve is similar to: https://www.thewatermansbarnes.co.uk, but in this case resizing the browser maintains the height of the video, rather than retaining its correct aspect.

My test site is http://www.design.initiostar.co.uk which works great, without the usual Xara video controls. My XAR file is attached.

Any help much appreciated; I looked at the various W3C options and could play around with these, but I am assuming someone has already solved this issue.

Thanks,

Gary

What about someone who is using a 32" display or larger?

The video is 4K and the attached image is from my 4K desktop display. What I want to achieve is the video occupying the full width of the browser window,(i.e. it extends beyond the page boundary regardless of the page width). I know it can be achieved, just not sure of the correct HTML/CSS to do it. Thanks Gary

Here's a solution that may help. It's from Sirans post on a similar issue but I can't find the thread at present. I've just copied pasted parts of Sirans xar file into yours. In FF for some reason you need to refresh the page to get the video, probably because I'm mixing things up but you should be able to get it to function. Nice seamless wave video by the way :)

Note the use names such as:

Quote:

---

htmlclass=xw_stretch_stick

---

Quote:

---

htmlclass=xw_stretch

---

Thank you for the advice.

I have amended my HTML to create a video page-fill, video browser-width banner and a video browser-fill. Updated at http://www.design.initiostar.co.uk. Yet to make them render better on a mobile with @media

Now looking for HTML code to push a footer to the bottom of the browser window. Any help much appreciated and happy to share the code.

Looking good :)

Doesn't Auto fit to page work?

I looked at Auto Fit before, but found I could not get the desired results; has always seemed better to create a genuine variant and manually adjust content to fit. I did this for my main site https://www.initiostar.co.uk.

Got the code to have the Footer always at the bottom of the browser, so the look and feel of the demo site looks better. Put some content on the video-fill browser page too. Learnt a few things today on the way! Here's the result http://www.design.initiostar.co.uk.

Suggestions, as always, welcome.