A tutorial about making fullscreen Youtube video background with the help of pure CSS and HTML. Just follow simple and easy steps to make it work.
To make a fullscreen photo using CSS is so easy but what about the video? With the help of plugins, we can do this job easily but the plugins may overload your site and hurt site performance.
We know that making Fullscreen HTML5 Video Background is also easy by using the video tag but when we talk about the Youtube video it requires a little bit more attention because of its iframe code.
But don’t worry, I developed a simple solution for this by using CSS only. By using the positioning element, I will make it fullscreen and to make it responsive, I will use the media queries.
I will place the iframe Youtube video code inside the div element and then apply some styling to make it work well. If you don’t like javascript then this solution is perfect for you. It’s lightweight and no need to worry about a conflict.
How to use it:
First, add the style.css file into the head.
<link rel="stylesheet" type="text/css" href="style.css" />
The HTML is simple and easy to understand. First, define the main class video-background then a child div with class name video-foreground.
Add the youtube iframe code to the child DIV.
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>Basic Styling
If you don’t want to add the style.css then have a look the complete CSS here.
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 100%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
Make Video Responsive
We need to create few of media query classes so the video should work well on different small and medium devices.
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}