Adding A Fullscreen Video Background to Your Websites

Learn how to create a full screen video background that covers the entire browser window: This is especially useful for making your landing pages vibrant and captivating

THE VIDEO (HTML)

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>


<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  
  <button id="myBtn" onclick="myFunction()">Pause </button>
</div>

THE CSS

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}

Optionally, you can add JavaScript to pause/play the video with a click of a button:

THE JAVASCRIPT

<script>
// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

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

Live Demo