3 simple steps to create video background in HTML

Full screen background always looks amazing if you have a good video about brief of your products or website. Sometimes people stop and watch background video which is very good for your website health due to spent time by visitors. Implementation of video background in HTML5 is very simple by using little bit CSS & Javascript. Here we have elaborate this functionality in three easiest steps.

ADVERTISEMENTS

Step 1: Create HTML File

Initially, we need to create file i.e. index.html. In this file, we'll add script to implement video and content.

<video muted autoplay loop id="bgVideo">
    <source src="VIDEO_FILE_PATH" type="video/mp4">
</video>
<div id="hoverContent">
  <p>Welcome to Etutorialz</p>
  <p>Please visit and share this page. </p>
</div>

For making above shared code working, you have to replace VIDEO_FILE_PATH with actual path of MP4 video like test_video.mp4.

Step 2: Add CSS

In this step, we'll add some css styles for making our background overlay content amazing.

<style type="text/css">
.hoverContent {
  background: rgba(0, 0, 0, 0.5);
  color: #eeeeee;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 30px;
}

#bgVideo {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  right: 0;
  bottom: 0;
}
</style>

You have to place this css script in head tag of your html page.