Home / JavaScript projects / Create a mobile-friendly, full-screen video background

Create a mobile-friendly, full-screen video background

JavaScript projects

October 27, 2021 0

Last updated: September 27, 2022.

Video backgrounds are ideal for displaying content on top of a playing video. This can be used to create portfolio-worthy landing pages or add news-like headlines and descriptions to video content.

In this tutorial, we will cover how to create a full-screen video background using HTML, CSS and JavaScript. We will also cover how to make the design responsive so that it looks great on both desktop and mobile.

What we will build

Below is a live preview of the completed project. Video credit to Engin Akyurt from Pexels!

See the Pen Untitled by James (@openjavascriptadmin) on CodePen.

Now, let’s see how it’s made so you can create your own video background and overlaying content.

Step 1: Choose a video

We start with the obvious but not always easy task of choosing a video. A great place to look is Pexels, which has a large library of free to use videos.

Note that it is a good idea to compress the video before deploying this solution live in production. Otherwise there may be a long loading time for the user and high bandwidth use on your server.

Step 2 (optional): Add Font Awesome CDN

In this tutorial, we use Font Awesome icons for the play and pause buttons. To access these icons in your project, add the following line of code to the <head> of your HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>

If you prefer, you can simply replace these icons with text in your document.

Step 3: The HTML markup

We start with the video element itself. For this, we need to specify a source for the video. Though optional, it is important to also specify video type so that a browser only downloads media that it is capable of playing.

To the video element, we also add the autoplay and loop attributes so that the video starts automatically and repeats itself. We also set muted as we do not want the video to be audible.

Next, we create the content which will overlay the video. For this, we create a div element containing a heading and several paragraphs. We wrap this in another div element (class="flex-container") because this will help us position the content when we add the CSS.

Finally, we create a button element that the user can use to play and pause the video. This initially contains a pause icon (as the video is playing at first). We add the play/pause functionality later when we add JavaScript.

    <video id="theVideo" autoplay muted loop>
        <source src="https://openjavascript.info/wp-content/uploads/2021/10/beach-video-low.mp4" type="video/mp4">
    </video>

    <div class="flex-container">
        <div class="content">
            <h1>Video background tutorial</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic excepturi asperiores quis omnis nulla ex debitis eaque perferendis suscipit alias ratione incidunt aut beatae aliquam, ad harum quibusdam ipsa rem!</p>
            <p>Quas voluptatum placeat expedita perspiciatis voluptates quia, assumenda eius aspernatur optio possimus id iure. Porro totam consectetur voluptate at quasi perferendis quisquam cumque esse. Maxime, quis non? Ab, quia? Sit?</p>
            <p>Nisi consequuntur sapiente minus quasi ipsam quaerat perferendis, maxime quibusdam praesentium, laboriosam cumque eius distinctio corporis libero explicabo ipsum. Modi dolorem temporibus maxime eum delectus deleniti sed tempore quibusdam reprehenderit.</p>
            <p>Maxime harum quidem amet perspiciatis labore ducimus deleniti nemo cupiditate repellendus ea, officiis impedit totam vero recusandae accusantium ullam fuga? Enim at asperiores nihil accusantium voluptatibus quibusdam fugiat veritatis deleniti?</p>
            <p>Id iste dolorem dolores perferendis rem earum ad in incidunt saepe, vitae expedita deserunt vero unde debitis exercitationem accusantium suscipit ipsam distinctio provident velit aperiam tempore fugiat est natus! Aut?</p>
        </div>
    </div>

    <button id="play-pause-btn"><i class="fas fa-pause"></i></button>

Step 4: CSS

We use CSS to layer our content.

For the video element, it is important to set this to position: fixed so it remains in place even when scrolled (it is fixed relative to the viewport) and so that is spans the entire width of the viewport (min-width: 100vw and min-height: 100vh). We set the video to a background layer using z-index, which is set to a value of -10.

For the flex-container, we set display: flex and justify-content: center and align-items: center so that the content div nested within it is centered. We set the minimum height of the flex-container div to 100vh and height to auto, which means it is at least the height of the viewport or greater if its contained content is particularly lengthy.

For the content div itself, we set this set this to a width of 50vw but also to a minimum of 210px (so it does not become too narrow when viewed on mobile). To make the its contained text readable while the video is also still visible, the background-color is set to rgba(0, 0, 0, 0.5) (black with an opacity of 0.5).

Finally, we style the button so it always appears in the bottom-right of the screen.

    body {
        margin: 0;
        font-size: 1rem;
        font-family: Arial, Helvetica, sans-serif;
    }

    #theVideo {
        position: fixed;
        min-width: 100vw;
        min-height: 100vh;
        z-index: -10; /* Makes video a background layer */
    }

    .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        height: auto;
    }

    .content {
        width: 50vw;  /* Content spans half the screen */
        min-width: 210px; /* But will never go below 210px (mobile-friendly) */
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 2rem;
        background-color: rgba(0, 0, 0, 0.5);
        color: rgb(240, 240, 240);
    }

    #play-pause-btn {
        position: fixed; /* Play/pause button in fixed position */
        bottom: 0; /* Absolute bottom */
        left: 0; /* Absolute left */
        margin: 0.5rem;
        padding: 0.7rem;
        background: #000;
        color: #fff;
    }

Step 5: JavaScript

Finally, we add the functionality so that the user can pause and play the video.

To achieve this, first select the button and video and save these two elements to variables.

Next, we add an event listener to the button, listening our to a click from the user. When the button is clicked, it fires the controlVideo function.

The function first checks to see if the video is paused when the user clicks the button. If so, the function: plays the video and set the icon inside the button to the font awesome pause icon.

Otherwise (the video is playing) the else statement is executed, which pauses the video and sets the icon inside the button to play.

        const video = document.getElementById('theVideo');
        const button = document.getElementById('play-pause-btn');

        button.addEventListener('click', controlVideo)

        function controlVideo() {
            if (video.paused) {
                video.play();
                button.innerHTML = '<i class="fas fa-pause">';
            } else {
                video.pause();
                button.innerHTML = '<i class="fas fa-play">';
            }
        }