Want to know how to add full page YouTube video backgrounds that auto-play on mute to your website or landing page?
If the video owner has left the share->embed feature available to you then they have consented to allow you usage of the video on their website.
Occasionally, you may run into someone who doesn’t agree with that policy and who will ask you to remove the video. It’s a common courtesy to attempt contacting to the original publisher for permission before using someone else’s work.
Let’s dive right into the HTML and CSS code. This will work with any YouTube video.
Marking Up the HTML and Video Embed Code from YouTube
First, add the video’s markup to your website.
Copy and paste the code from the snippet below. Replace the YouTube video ID in the iframe src="..." with your YouTube video’s video ID.
Below, the video ID is vs65Ajw4_9o and is linked to a video about the best Maine lobster rolls. You’ll know right away if you forget to do this step or do it incorrectly because you’ll see a video about the best lobster rolls in Maine.
<div id="video-background-wrapper"> <div class="video-background"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vs6SAjw4_9o?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=vs6SAjw4_9o&mute=1" frameborder="0" allowfullscreen></iframe> </div> </div>
Styling Your YouTube Video Background with CSS
The goal here is a full-page video background of a YouTube video. It will be in a fixed position on the page — meaning it doesn’t move or scroll when the page scrolls.
Here’s the CSS:
#videobg {
display: none;
}
@media only screen and (min-width: 1024px) {
#videobg {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.video-background {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
}
The CSS hides the video background on devices that aren’t at least 1024px wide. 1024px is the smallest size of most typical consumer laptop screens.
Why is it important to hide the full page video background on mobile devices and tablets smaller than a laptop? Well, auto-playing videos that have sound on mobile devices doesn’t work.
It’s not your fault. Blame Apple.
It’s something someone at a high-level decided in regards to providing better user experiences on smartphones. Essentially, videos that auto-play on websites are kind of annoying.
Auto-Playing Muted Videos as Full Page Backgrounds
Place the HTML code inside of your website’s <body></body> tags and you’re doing it. The CSS is set up to position your YouTube video as a fixed positioned, full-browser width and height, auto-playing, totally muted volume, background.
Full Page Video Background Without YouTube
It’s possible to create the same full-page video background effect using a non-YouTube video too.
Depending on the legacy browsers you want to support, you may need to create different versions of your video file. Modern browsers support the .mp4 video format pretty universally.
Full-Page HTML5 Video Background Code (non-YouTube version)
<video playsinline autoplay muted loop poster="your-video-image.jpg" id="bgvid">
<source src="your-video.mp4" type="video/mp4">
</video>
HTML5 uses the <video> video tag and lists video source files as a separate nested <source> tag. You can see that there are inline attributes telling the video to play inline, autoplay, play muted, to loop, and specificying the path to the video’s poster image.
Styling Your Full-Page HTML5 Video Background (non-YouTube Version)
Styling your video is basically the same as the YouTube version.
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(your-video-image.jpg) no-repeat;
background-size: cover;
}
Note that there’s a background style property that points to the same video poster image file as you used in the HTML code. Otherwise, this will place your video in a fixed position on your page and scale it to stretch the full width and height of your browser.
Pretty cool, right?
0 Comments