Tutorials

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.

Robert

Hey there! I started punchsalad.com & TipsWithPunch YouTube channel, out of frustration for time-wasting tutorials on YouTube that didn’t get you anywhere. The tutorials are mostly about WordPress, web analytics, Google Ads, and other useful website-related software.

Share
Published by
Robert
Tags: html5 video