Fill Browser Video

This code goes in the Page HTML code (HEAD)

min-width is = to the mid point between two variants
<! --1920 x 1080 video set to fill the browser window--> <style> #myVideo { display: none; position: fixed; left: 0; bottom: 0; min-width: 100%; min-height:100%; margin-left: 50vw; transform: translate(-50%); } @media screen and (min-width: 840px) { #myVideo { display: block; z-index: -1; } </style> <video autoplay muted loop playsinline id="myVideo"> <source src="" type="video/mp4"> </video> playsinline is added to ensure, particularly with mobile iOS /Safari, that the video plays in the viewing area. In this example and to demonstrate how to use @media, the video plays in the desktop variant only, and always remains in the centre of the viewing window, regardless of the browser width. The mobile variant uses a simple image instead of a video, which is a design choice not a technology constraint. Note*: where the video is “absolute” it will scroll upwards and downwards in line with the content on the page. In another the example here the video is fixed: but an opaque cover (stretched rectangle) is placed on the page. This offers the opportunity to create a parallax effect with content flowing over the background video.
z-index set to -1 to ensure the video stays in the background
“fixed” can be changed to “absolute” for the video to scroll up and back - see Note *
As the desktop transitions from its full screen video background the @media rule prevents the video showing and it is replaced with a simple lightweight image. This was a design choice to illustrate that by using @media rules the designer can choose to include and exclude content in each of the variants.

Video Snapshot Image