YogeshChauhan . com

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

in CSS & JavaScript on 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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to draw an SVG path on scroll using JavaScript?JavaScriptIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngularLearn how to add Scroll Indicator using CSS and JavaScript?CSSFULL OUTER JOIN in PostgresPostgresHow can one check to see if a remote file exists using PHP?PHPHow to use HTML picture Tag?HTML