YogeshChauhan.com
How To Create a Fullscreen Background Video using CSS and JavaScript?
September 25, 2019


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

dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields?



You might also like these

How to remove special characters (dash, asterisk etc) from any string in PHP?PHPFew more :nth-child examples in CSSCSSDROP DATABASE (remove a database) from PostgresPostgresCROSS JOIN in PostgresPostgresSome interesting HTML Input Attributes to rememberHTMLHow to Install PHP composer in Mac OS Catalina?PHP