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.  

Reference: w3schools

Checkout the DEMO

5 Comments

gaman dj

Jun 16, 2020 06:06:48 pm

Magnificent website. Lots of helpful information here. I'm sending it to several friends ans also sharing in delicious. And naturally, thank you in your sweat!

Juman

Jun 15, 2020 10:06:04 pm

I feel this is among the such a lot important info for me. And i'm happy reading your article. However want to remark on few general things, The website style is perfect, the articles is really nice : D. Good process, cheers

Thanks

Mar 12, 2020 12:03:27 am

Thanks for sharing such a good thought, paragraph is fastidious, thats why i have read it fully

Karen

Mar 06, 2020 08:03:34 pm

I've been surfing online greater than 3 hours lately, but I by no means discovered any attention-grabbing article like yours. It's beautiful value sufficient for me. In my view, if all website owners and bloggers made good content material as you did, the web might be a lot more helpful than ever before.

Victoria

Mar 06, 2020 08:03:29 pm

Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how can we communicate?

Leave a reply

Your email address will not be published. required fields are marked *