Yogesh Chauhan's Blog

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.

<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>

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.

#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;

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.

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

function myFunction() {
  if (video.paused) {
    btn.innerHTML = "Pause the Video";
  } else {
    btn.innerHTML = "Play the Video";

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

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What does useEffect do in React?ReactHow to create a link tag button using CSS?CSSA Quick Guide to Object-Oriented Programming in PHPPHPHow to Validate User Name, Email Address and URL in PHP?PHPthe box-sizing property in CSSCSSapply_filters function in WordPressWordPress