Full screen background video

Full screen background video

Would you like this on your site?

Read below

Fullscreen Background Video on pages

CSS and HTML

Things to remember

On hand-held devices, you cannot "auto-play" or force the video to start, the user must click on the browser's "play" button. There is no work around via Java. This is to prevent users accidentlly downloading too much data and blowing their subscriptions whilst roaming. Chrome will give you this kind of error if you try to force the playback. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

However, you as a designer want to have a cool display and no control buttons, therefore there will have to be some compromise.

We prefer to substitute the display of the video with a chosen photo when the screen size is under a certain width, in this example it is 992 pixels wide.

If you change your window size to less than 992 pixels wide, the video will not display but the replacement image is shown and vis-versa of course.

Another difficulty is the screen sizes and orientation. Wide screen 16.9 or standard 4.3 screens, tall and narrow portrait views on hand-held devices... This all adds to the difficulty of getting that video to fill the screen. On many screens it may be full screen, but no the full size.

We've updated the code with the following with "muted" and "playsinline".

<video src="..." muted playsinline></video>

Muted apart from "muting" the volume, allows the video to autoplay on a Chrome browser after the user does a simply refresh, if muted is excluded the video is paused after the refresh.

Playsinline tells mobile browsers to play the video where it is coded to play and not open in to a fullscreen.

The HTML


    <div id="fullScreenDiv">
        <img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video">
        <div id="videoDiv">           
            <video id="video" preload autoplay muted playsinline loop>
            <source src="video/t12.webm" type="video/webm"></source>
            <source src="video/t12.mp4" type="video/mp4"></source>
            </video> 
        </div>
        <div id="messageBox"> 
            <div>
                <h1>Full screen background video</h1>
                <h2>Would you like this on your site?</h2>
                <h3><a href="#main" class="scrolly">Read below</a></h3>
            </div>
        </div>   
    </div>

The CSS3 styles


 /* Default to hide the video on all devices */
#video{display:none}

/* Default to display the image on all devices */
#videosubstitute{display:block;width:auto;height:100%;}

html, body {
    height: 100%;
    margin: 0;
}
#fullScreenDiv{
    width:100%;
    min-height: 100%; 
   /* Set the height to match that of the viewport. */
    height: 100vh;
    width: auto;
    padding:0!important;
    margin: 0!important;
    background-color: gray;
    position: relative;
}
#video{    
    width: 100vw; 
    height: auto;
    object-fit: cover;
    left: 0px;
    top: 0px;
    z-index: 1;
}

@media (min-aspect-ratio: 16/9) {
  #video{
    height: 150%;
    top: -100%;
  }
  #videosubstitute{
    display:block;
    width: 100%;
    height: auto;}
}

@media (max-aspect-ratio: 16/9) {
  #video {
    width: 150%;
    left: -100%;
  }
  #videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992  pixels or more, then display the video but hide the image*/
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}   

/* The container for our text and stuff */
#messageBox{
    position: absolute;  top: 0;  left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:100%;
}
 

Full screen background video with autoplay

Send us a message

Please indicate your name.
Please indicate a valid email address.