Fullscreen Background Video (Autoplay) using HTML5, CSS & JS – Cross-Browser

By Raddy in CSS / JavaScript · November 16, 2020

Today, we are going to create a Fullscreen Background Video with autoplay (no sound) that is also responsive and I will show you a workaround for older generation iPad and other devices that require user interaction to make the video play.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Fullscreen Video Autoplay Background</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/script.js"></script>
</head>
<body>

    <img src="https://raddy.co.uk/wp-content/uploads/2020/05/raddythebrand-svg-red-v3.svg" alt="RaddyTheBrand Logo">

    <div class="bg-overlay"></div>
    <video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted loop>
        <source src="180503_02_PurpleGrid.mp4">
        Your browser does not support the video tag.
    </video>

</body>
</html>

body {
    display: flex;
    align-content: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

img { width: 600px; }

.fullscreen-video {
    position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -10;
}

.bg-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.6;
    z-index: -9;
}

document.addEventListener("DOMContentLoaded", function(){
    document.body.addEventListener("touchstart", playVideo);
    function playVideo() {
        const video = document.getElementById('myVideo');
        if(video.playing) {
        } else {
            video.play();
        }
    }
});

There is also a good jQuery version here.

Credit & Usefull Reads: