<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Fullscreen Video Autoplay </title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <center>
        <div class="main"></div>
        <video id="flower" autoplay muted loop>
             <source src="https://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </center>
</body>
</html>
body {
    align-content: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.flower {
    position: fixed;
    overflow: hidden;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -10;
}

.main {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    opacity: 0.1;
    z-index: -9;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.