Welcome to a quick tutorial on how to create a responsive background video in HTML and CSS. Want to set a video as the background? Yes, it is possible to do so with some clever “layering”.
- Place the video and content in a wrapper.
<div id="wrap"><video id="back" src="vid.mp4" autostart loop><div id="front">TEXT</div></div>
- Layer them accordingly in CSS.
#wrap { position: relative; }#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.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short 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.
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.
BACKGROUND VIDEO EXAMPLES
All right, let us now walk through some examples of how to create a responsive background video.
EXAMPLE 1) RESPONSIVE BACKGROUND VIDEO
1A) THE HTML
<!-- (A) WRAPPER -->
<div id="wrap">
<!-- (B) BACKGROUND VIDEO -->
<video id="vid" src="clouds.mp4" autoplay muted loop></video>
<!-- (C) CONTENTS -->
<div id="content">Hello World!</div>
</div>
As in the introduction, the whole idea is to layer the containers:
<div id="wrap">is the wrapper to contain the video and overlay contents.<video id="vid">is the background video. Take extra note that it is set toautoplay muted loop.<div id="content">is the foreground text.
1B) THE CSS
/* (A) WRAPPER */
#wrap { position: relative; }
/* (B) LAYER VIDEO & CONTENT */
#vid, #content {
position: absolute;
width: 100%;
}
#vid { z-index: 1; } /* behind */
#content { z-index: 2; } /* in front */
/* (X) COSMETICS - NOT REALLY IMPORTANT */
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#wrap { max-width: 600px; /* optional */ }
#content { padding: 10px; }#wrap { position: relative }is necessary to properly layer the video and content enclosed inside.#vid, #content { position: absolute }deals with layering. Place the video behind with#vid { z-index: 1 }and content on top with#content { z-index: 2 }.- Lastly,
#vid, #content { width: 100% }is the one that does the responsive magic. That is, the video and content will automatically resize to fit.
Yep, it’s that simple.
EXAMPLE 2) FULLSCREEN BACKGROUND VIDEO
2A) THE HTML
<!-- (A) BACKGROUND VIDEO -->
<video id="vid" src="clouds.mp4" autoplay muted loop></video>
<!-- (B) CONTENTS -->
<div id="content">Hello World!</div>Same old story here, except no wrapper <div id="wrap"> this time round; Since this is a full-page background video, the <body> itself is the wrapper.
2B) THE CSS
/* (A) REMOVE DEFAULT PAGE SPACING */
html, body { margin: 0; padding: 0; }
/* (B) VIDEO */
#vid {
/* (B1) FIXED IN BACKGROUND */
position: fixed; z-index: 1;
top: 0; left: 0;
/* (B2) FIT FULL PAGE */
width: 100vw; height: 100vh;
object-fit: cover;
}
/* (C) CONTENT */
#content {
/* (C1) LAYER IN FRONT */
position: absolute; z-index: 2;
top: 0; width: 0;
/* (C2) FULL WIDTH */
width: 100vw;
}
/* (X) COSMETICS - NOT REALLY IMPORTANT */
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#content { padding: 10px; }This is actually the same “layer video behind and content in front”. Just done a little differently.
#vidis now set to a fixed full-page video.position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;sets the video to cover the entire window.object-fit: coverexpands 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.
- The same old story –
#vid { z-index: 1 }places the video behind,#content { z-index: 2 }places the content in front.
3) YOUTUBE BACKGROUND VIDEO?
3A) GET THE EMBED CODE
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. To get started, search for the video you want. Click on “share” > “embed” > copy the <iframe> code fragment.
3B) THE HTML
<div id="wrap">
<!-- (B) BACKGROUND VIDEO -->
<iframe id="vid" width="560" height="315"
src="https://www.youtube.com/embed/kZ12kRS1Dao?autoplay=1&loop=1&controls=0" frameborder="0"></iframe>
<!-- (C) CONTENTS -->
<div id="content">Hello World!</div>
</div>This is the same old strategy again, but the background video is now replaced with the YouTube embed.
3C) THE CSS
/* (A) WRAPPER */
#wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
/* (B) LAYERING */
#vid, #content { position: absolute; }
/* (B1) YOUTUBE VIDEO */
#vid {
z-index: 1; top: 0; left: 0;
width: 100%; height: 100%;
}
/* (B2) CONTENT */
#content {
z-index: 2; bottom: 0; left: 0;
}
/* (X) COSMETICS - NOT REALLY IMPORTANT */
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#content {
padding: 10px;
color: #fff;
background: rgba(0, 0, 0 , 0.5);
}
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 its 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.
EXTRA 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’s 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.
REFERENCES & LINKS
- HTML Video – MDN
- List of sites with free video stock footage – veed.me
- HTML Video Background Positioning – slicejack.com
INFOGRAPHIC CHEAT SHEET
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!
