Last updated on April 11th, 2022 at 07:22 pm
In this tutorial we are going to see how to create a full page video background with autoplay and loop using CSS and HTML5. A webpage with video background is one of the latest designs trends we come across in most modern websites. You might be wondering how to develop one for yourself? Here is how you do it.
Create a simple HTML file named html5_video.html and proceed with the steps below.
I am creating an html page with the name index.html and created a div container to hold the video. This div also contains specific sections where you can add your own content.
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="YOUR_OWN_VIDEO_FILE_IN_MP4_FORMAT" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="news">
<h1>This Is A Test HTML5 Video Background For Your Web Page. [Your Content Goes Here]</h1>
</div>
<div class="latest">
Latest News 1<p>
Latest News 2<p>
Latest News 3<p>
Latest News 4<p>
Latest News 5<p>Latest News 6<p>
Latest News 7
</div>
<div class="copyright" align="center">
© 2016-25
</div>
</div>
In the code above you can see a VIDEO tag which is basically an HTML5 tag that loads video, along with options such as AUTOPLAY & LOOP.
<video autoplay loop class="fillWidth">
<source src="MP4/Duck-Duck-Go.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
If a browser doesn’t support HTML5 then an error message will be displayed as per the code. All the latest versions of Mozilla, Chrome & Internet Explorer is supporting HTML5 video tag.
The next most important step is to add the CSS / Style for the web page. This make sure that the video is displayed full screen and all the div’s are aligned.
.video-container {
position: fixed;
bottom: 0%;
top:0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.news {
width: 100%;
color: #fff;
top: 20%;
position: absolute;
background-color: #000;
}
.latest {
width: 30%;
color: #000;
bottom: 20%;
padding-left:10px;
padding-top:10px;
left: 90%;
position: absolute;
background-color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.copyright
{
position: absolute;
width:100%;
color:#fff;
bottom:10%;
}
The style sheet above should go inside the HEAD tag.
One last step is to upload your video in MP4 format to the server. It should be a small file Maximum around 5 MB to 6 MB max. Reason is because your aim is to load video once the HTML page is loaded and don’t want users to wait till video download is complete.
Find the complete code below. Just copy paste and make sure you modify video URL with your own.
<!DOCTYPE HTML>
<html manifest="video.appcache">
<head lang="en">
<meta charset="UTF-8">
<title>CSS | HTML5 Video Background Web Page Design Tutorial <> Mistonline.in</title>
<style>
.video-container {
position: fixed;
bottom: 0%;
top:0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: fixed;
}
.news {
width: 100%;
color: #fff;
top: 20%;
position: absolute;
background-color: #000;
}
.latest {
width: 30%;
color: #000;
bottom: 20%;
padding-left:10px;
padding-top:10px;
left: 90%;
position: absolute;
background-color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.copyright
{
position: absolute;
width:100%;
color:#fff;
bottom:10%;
}
</style>
</head>
<body>
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="YOUR_OWN_VIDEO_FILE_IN_MP4_FORMAT" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="news">
<h1>This Is A Test HTML5 Video Background For Your Web Page. [Your Content Goes Here]</h1>
</div>
<div class="latest">
Latest News 1<p>
Latest News 2<p>
Latest News 3<p>
Latest News 4<p>
Latest News 5<p>Latest News 6<p>
Latest News 7
</div>
<div class="copyright" align="center">
© 2016-20
</div>
</div>
</body>
</html>
HTML5 Video Background Web Page Design Tutorial has been tested in all latest browsers.
admin