How To Create a Fullscreen Background Video using CSS and JavaScript?

Today I am going to talk about how to create a full screen video using JavaScript.

First of all, let's just download the video from YouTube link. CLICK HERE.

Now let's start with the simple HTML page first.

<video autoplay muted loop id="myVideo">
  <source src="DEMO-how-to-create-a-fullscreen-background-video-using-css-and-javascript.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Welcome to The Coding Yogi Blog</h1>
  <p>On this blog, you'll find various tips and tricks on how to code. I publish new articles everyday. </p>
  <button id="myBtn" onclick="myFunction()">Pause the Video</button>
</div>

I am going to add a video using video tag of HTML. The HTML video tag is used to display many types of video streams such as movie clips. Currently, the video tag supports MP4, WebM, and Ogg video formats. Like image tag it has many attributes like width, height, src etc. Out of all attributes, I am going to use loop, autoplay and muted today.

Note: The video tag is not supported in Internet Explorer 8 and earlier versions.

Let's discuss the attributes first:

• Autoplay: It will start playing the video as soon as the video is ready on the webpage.
• muted: As per the name, the audio output will be turned off using this tag.
• loop: The video will be played in infinite loops.

So, after those attributes inside the video tag, we need to specify the source and then a simple line to tell user if the video is not supported on the browser. 

In the next HTML part I am just adding some content to make it look nice and I don't want to leave the video alone! Also, a simple button to play and pause the video, which we will see in JS code.

Now let's look at the CSS.

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

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: white;
  color: Blue;
  cursor: pointer;
}

#myBtn:hover {
  background: green;
  color: yellow;
}
</style>

All you need to take care of here is the id myvideo. It specifies the position and height and width of the video. You can set the position from where you want to display the video from. In this case, we want full screen video, so fixed position.  0 margins with right and bottom as we do not want any extra space in the background. 

Let's now take a look at the JS code.

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause the Video";
  } else {
    video.pause();
    btn.innerHTML = "Play the Video";
  }
}
</script>

In the JavaScript code above, I am simply creating 2 variables. Both of them are just to control the video using button we created in HTML.

When user clicks on the button, it simply calls the function and goes for one or the other condition. There are 2 simple controls we are using to make it work. .play and .pause

The buttons are just to give the user control if the video is lengthy. You can skip it and use a nice short video adn create a beautiful background using this tutorial.  

Credit: w3schools

Share this post