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="https://initiostar.co.uk/assets/beach.mp4" 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: https://initiostar.co.uk/demo/banner-vid/ 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
