Add Video Background in HTML

I’ll show you how to add video background in HTML on your website.

Learn how you can just copy and paste the code so it will work on your website.

So I’m not going to go in detail what each line of code does, but this is more of a plug and play video. 

Grab the HTML below:

<div class="twp-video-background">
  <div class="twp-video-foreground">
      <video autoplay muted loop id="myVideo">
        <source src="/countryselector/uploads/sky.mov" type="video/mp4">
      </video>
  </div>
  <div class="twp-video-layer"></div>
</div>

And the CSS:

/*
    HTML VIDEO AS BACKGROUND:
    I updated code from Dudley Storey  
*/
.twp-video-background {
    background: #000;
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    overflow: hidden;
    box-sizing: border-box; 
}
.twp-video-foreground,
.twp-video-background video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
    object-fit: cover; 
}

.twp-video-foreground{
    padding-bottom: 56.25%;
    box-sizing: border-box; 
}

.twp-video-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 0.5;
    box-sizing: border-box; 
}

Summary of this responsive video background tutorial:

1. I’ll show you how my website looks like right now

2. Where to get free videos for header backgrounds:
https://www.videvo.net/video/milky-way-timelapse/2659/

3. I’ll show you the HTML and CSS code and where you need to place it in your code.

    – You need to change the URL to your video

    –   I’ll show you where you can adjust the autoplay, loop & mute for HTML5 video.

4. How well the responsive layout works and how you can adjust the layer.
Check the responsive layout here.