Fixed height video

The Early Bird...

...gets the food.

Don't be late!

What ever your reasons in wanting to do this, the HTML and CSS is fairly simply and can be fairly responsive when needed. However on many mobile and hand-held platforms the auto-play is disabled, so the video will remain "paused" at the beginning when the document is loaded. The only work around I've found is to use Java and force the video to play after a user interaction.

You'll need 2 DIVs as shown in the diagram below.

1st DIV "videoDiv" is a container which will hold the display and set the height as required.
2nd DIV "videoMessage" will display all the foreground content such as text and images.

You can style the text as you want, place images, dynamic data or whatever you need in the 3rd DIV.

The video element does not display any controls and is set with a preload and autoplay.

You'll want to use video formats that are compatible with as many browsers as needed, in the above demo I've used MP4 and WEBM.

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 HTML5 tags

<div id="videoDiv"> 
<video id="video1" preload="" autoplay="" muted="" playsinline="" loop="">
<source src="video/t13.mp4" type="video/mp4">
</video> 
<div id="videoMessage" class="styling">
<h1>The Early Bird...</h1>
<h2>...gets the food.</h2>
<h3>Don't be late!</h3>
<p class="videoClick">
<a href="https://www.imi21.com/background-video-full-screen.php">Click here and be impressed</a>
</p> 
</div>
</div>

The CSS3 styles

Required styling


#videoDiv {width: 100%; height: 360px; position: relative;}
#video1 { margin: auto; display: block;}
#videoMessage { position: absolute; top: 0; left: 0;
display: flex;
flex-direction: column; 
justify-content: center;
align-items: center; 
width: 100%;
height: 100%;}

Optional styling


#videoMessage *{padding:0.4em; margin:0}
#videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:99 }
#videoMessage h1{font-size: 2em;color:#ffffff;text-align:center;}
#videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;}
#videoMessage h3{font-size: 1.2em;color:#ffffff;text-align:center;}
.videoClick {text-align:center}
.videoClick a{color:white;background-color:rgba(241, 241, 241, 0.25);font-size: 1.7em;cursor:pointer;cursor:hand}

Responsive background video

Making this responsive for different screen sizes, mobiles and hand-held devices is straight forward. We set the video tag to 100%.

Need a website?

We're available for

HTML projects

Check our rates

The HTML is the same, we just change the VideoDiv with a maximum size and set the Video tag to width=100% and height=auto in the CSS.

The HTML


<div id="videoDiv2"> 
<video id="video2" preload="" autoplay="" muted="" playsinline="" loop="">
<source src="video/t12.webm" type="video/webm">
<source src="video/t13.mp4" type="video/mp4">
</video> 
    <div id="videoMessage2" class="styling">
        <h1>Need a website?</h1>
        <h2>We're available for</h2>
        <h3>HTML projects</h3>
        <p class="videoClick">
            <a href="portfolio.php">Check our rates</a>
        </p> 
    </div>
</div>

The modified CSS3 styles


#videoDiv2 {width:100%; max-width:1200px; margin:auto; display:block; position: relative;} /* This has been changed */
#video2{width:100%; height:auto } /* This has been changed */
#videoMessage2 { position: absolute; top: 0; left: 0;
display: flex;
flex-direction: column; 
justify-content: center;
align-items: center; 
width: 100%;
height: 100%;}

Background video for HTML