Placing a video in the background of a div

Fullscreen Background Video on pages

CSS and HTML

Things to remember

On some 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 from accidentally downloading too much data and blowing their subscriptions whilst roaming. 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'll look at this problem on the next page, but for now let's look at the full screen background video that's working and auto-playing.

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="videowrapper">
    <div id="fullScreenDiv">
       <video id="video" role="presentation" preload="auto" playsinline="" crossorigin="anonymous" loop="" muted="" autoplay="" class="blur">
            <source src="video/t12.webm" type="video/webm">
            <source src="video/t12.mp4" type="video/mp4">
        </video> 
        <div id="videoMessage" class="styling"> 
            <h1>Full screen background video</h1>
            <h2>Would you like this on your site?</h2>
            <p class="videoClick"><a href="#main">Find out how</a></p> 
        </div>   
    </div>
</div>

The CSS3 styles

Required CSS


html, body {
    height: 100%;
    margin: 0;
}
#videowrapper{  
    position: relative;
    overflow: hidden;
} 

#fullScreenDiv{
    min-height: 100%; 
    height: 100vh;
    width: 100vw;
    padding:0;
    margin: 0;
    background-color: gray;
    position: relative;
}

#video{    
    width: 100vw; 
    height: auto;
    margin: auto;
    display: block;
}
@media (min-aspect-ratio: 16/9) {
  #video{
    width: 100vw; 
    height:auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #video {
    height: 100vh; 
    width:auto;
    margin-left: 50vw;
    transform: translate(-50%);
  }
}

#videoMessage{
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Optional styling


.styling *{ margin:0.2em; text-align:center;color:#ffffff;}
.styling h1{font-size: 3em; text-shadow: 2px 2px 2px #000000;}
.styling h2{font-size: 1.5em;}
.styling h3{font-size: 1.2em;}
.videoClick a{padding:0.2em 0.5em;
    border-radius:0.5em;
    color:white;background-color:rgba(241, 241, 241, 0.45);
    font-size: 1.7em;
    cursor:pointer;cursor:hand;
}

Full screen background video

Would you like this on your site?