Full screen background video

Full screen background video

Would you like this on your site?

Read below

Fullscreen Background Video pages

CSS and HTML

Things to remember

On hand-held devices, you cannot "auto-play" or force the video to start, the use must click on the browser's "play" button. There is no work around via Java. This is to prevent users accidently downloading too much data and blowing their subscriptions whilst roaming.

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 will 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.

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 preload="preload" id="video" autoplay="autoplay" loop="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%;
}
 

Contact imi21.com

 

Other ways to contact us