Responsive Background Video – Simple Examples

Welcome to a quick tutorial and examples of how to create a responsive background video. Want to set a video as the background? Sadly, CSS can only set images as the background at the time of writing.

To create a responsive background video, the general idea is to set a video tag as the background and layer contents on top of it.

  • <video id="back" src="video.mp4" autostart loop>
  • <div id="front">TEXT</div>
  • #back, #front { position: absolute; width: 100%; }
  • #back { z-index: 1; }
  • #front { z-index: 2; }

That covers the basics, but just how does it work? Let us walk through a few examples – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Background Videos Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

BACKGROUND VIDEO EXAMPLES

All right, let us now walk through some examples on how to create a responsive background video.

 

1) RESPONSIVE BACKGROUND VIDEO

THE HTML

1-background.html
 <!-- (A) VIDEO + CONTENTS WRAPPER -->
<div id="myWrap">
  <!-- (B) BACKGROUND VIDEO -->
  <video id="myVid" src="clouds.mp4" 
         autoplay muted loop></video>

  <!-- (C) CONTENTS -->
  <div id="myContent">Hello World!</div>
</div>

As in the introduction, the whole idea is to layer the containers:

  • <div id="myWrap"> is the wrapper to contain the video and overlay contents.
  • <video id="myVid"> is the background video. Take extra note that it is set to autoplay muted loop.
  • <div id="myContent"> is the foreground text.

 

THE CSS

1-background.css
/* (A) WRAPPER */
#myWrap {
  position: relative;
  max-width: 600px; /* OPTIONAL */
}
 
/* (B) VIDEO + CONTENT */
#myVid, #myContent {
  position: absolute;
  width: 100%;
}

/* (C) LAYERING */
#myVid { z-index: 1; } /* BEHIND */
#myContent { z-index: 2; } /* IN FRONT */
  • #myWrap { position: relative } is necessary to properly layer the video and content enclosed inside.
  • #myVid, #myContent { position: absolute } deals with the layering. Video behind #myVid { z-index: 1; } and content on top #myContent { z-index: 2; }.
  • Lastly, #myVid, #myContent { width: 100%; } is the one that does the responsive magic. That is, the video and content will automatically resize to fit the full width.

Yep, it’s that simple.

 

 

2) FULLSCREEN BACKGROUND VIDEO

THE HTML

2-fullscreen.html
<!-- (A) BACKGROUND VIDEO -->
<video id="myVid" src="clouds.mp4" 
       autoplay muted loop></video>

<!-- (B) CONTENTS -->
<div id="myContent">Hello World!</div>

Same old story here, except no wrapper this time round; Since this is a full-page background video, we don’t need a wrapper.

 

CSS

2-fullscreen.css
/* (A) VIDEO */
#myVid {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: 1;
}
 
/* (B) CONTENT */
#myContent {
  position: absolute;
  top: 0; width: 0;
  width: 100vw;
  z-index: 2;
}
 
/* (C) NO PAGE BORDERS */
html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

This is actually the same “layer video behind and content in front”. Just done a little differently.

  • #myVid is now set to a fixed full-page video.
    • position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; literally sets it to cover the entire window.
    • object-fit: cover expands the video to fit the entire window; Without this, the video will maintain its aspect ratio and be placed in the middle of the screen.
  • What happens next is the same old story – #myVid { z-index: 1 } places the video behind, #myContent { z-index: 2 } places the content in front.

 

 

3) YOUTUBE BACKGROUND VIDEO?

Finally, some smart people may be thinking “why don’t we use YouTube videos as the background”? Well, it’s not impossible, but there are some restrictions.

 

GET THE EMBED CODE

To get started, search for the video you want. Click on “share” > “embed” > copy the <iframe> code fragment.

 

THE HTML

3-youtube.html
<div id="ytWrap">
  <iframe id="ytVid" width="560" height="315"
          src="https://www.youtube.com/embed/kZ12kRS1Dao?autoplay=1&loop=1&controls=0" frameborder="0"></iframe>
  <div id="ytContent">Foo BAR</div>
</div>

This is the same old strategy again, but we are replacing the background video with a YouTube embed. Also, take note of the appended parameters – ?autoplay=1&loop=1&controls=0. This will automatically start the video and loop it.

 

THE CSS

3-youtube.css
/* (A) WRAPPER */
#ytWrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

/* (B) LAYERING */
#ytVid, #ytContent {
  position: absolute;
  top: 0; left: 0;
}

/* (C) YOUTUBE VIDEO */
#ytVid {
  z-index: 1;
  width: 100%; height: 100%;
}

/* (D) OVERLAY CONTENT */
#ytContent {
  z-index: 2;
  color: #f00;
}

Yes, we can overlay our own content over an embedded YouTube video. But the restriction is that – We cannot fully disable the controls and info. I am pretty sure this is due to some copyright issues, and YouTube has to credit their content creators.

So… using YouTube video as the background? I don’t think it is the best idea. Although I am also not too sure if the YouTube API has a “no branding, no info, no controls” mode for private videos.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

EXTRA) AUTOPLAY MAY NOT ALWAYS WORK

A small heads up, video autoplay may not always work. Especially on mobile devices that are not connected to WIFI. Nothing much we can do about it either – It’s the browser default behavior. I am pretty sure there are “Javascript hacks” to “force start” a video, but that will probably also not work on modern browsers with enhanced security.

 

INFOGRAPHIC CHEAT SHEET

Responsive HTML Video Tag (Click to Enlarge)

 

REFERENCES & LINKS

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *