Fullscreen videos are a trend and there’s a good reason for it. Having a background video on your web amplifies your brand’s message, adds a dynamic look to it and it just looks amazing. On this tutorial we’ll make a fullscreen video using the HTML 5 video tag. We’ll also position it on the background. All by just using CSS and HTML.
Before getting into the details, check out the result:
Setting up our HTML for the fullscreen video container
So now that we know these 2 basic rules, let’s start setting up the HTML for our background video:
<div class="video-container">
<video autoplay muted loop poster="cake.jpg">
<source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
</div>
<!-- end of video-container-->
Code language: HTML, XML (xml)The video element comes loaded with a few handy attributes that can be used to control how and when a video plays:
- Autoplay: The boolean
autoplayattribute ensures that the fullscreen video automatically plays in the background. - Controls: There will be no play/stop/pause controls for our background video so we have omitted the
controlsattribute. This is a boolean attribute. - Muted: The
mutedattribute serves the fullscreen video without any sound. - Loop: We want our background video to auto-play in a loop so we also use the
loopattribute. Theloopattribute is also a boolean. - Poster: Lastly, the
posterattribute will serve an image to the user while the background video loads. For example, if a user has slow internet speed then it might be a better choice to serve an image. It will also display an image in case the fullscreen video doesn’t display at all. This can happen when the HTML5videoelement is not supported by a particular browser.
Using CSS to make the video fullscreen
Now that we have the video element placed inside our HTML, let’s set up the CSS for it. We’d like the video to cover the entire page.
video{
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
}
Code language: CSS (css)Our CSS fullscreen video has a position of fixed thus being removed from the normal flow of the HTML document.
Additionally, it has its top and left properties set to 0 so it’s positioned at the top-left corner of the body of the web page. The object-fit property will dictate how the fullscreen video should be resized. The cover value will ensure that the video maintains its aspect ratio and isn’t distorted. The image will be clipped to fit the width of the video. It is set to 100% since we want it to span the video of the document. Finally, the height and width properties of our fullscreen video have a value of 100 to ensure that the video’s height and width scales appropriately to display all the video content.
That’s all the CSS that we need to display a fullscreen video on our page! With that being said, now we can proceed to add other things to be layered on top of our fullscreen video such as headings, buttons, and other elements.
Overlay elements on top of the background video
Let’s now add a heading and a button on top of the fullscreen video as we see in a lot of web pages that use background videos. The key here is that any elements laid on top of the video should have high contrast. This will make them easily visible against the background video leading to better user experience and accessibility. To do this we will be making a separate div element which will be the parent of our heading and button:
<div class="header">
<h1>Blueberry Cheesecake</h1>
<button>Recipe here</button>
</div>
Code language: HTML, XML (xml)Right now this would appear under the fullscreen video, not on the front. We have to apply some more changes to the header element in order to position it over the CSS background video:
.header {
position: relative;
height: 100vh;
text-align: center;
justify-content: center;
}
Code language: CSS (css)We have set a relative position for the header element so it gets placed placed over the fixed positioned video element. We are also using hei``ght:100% on the header element to make sure our image takes the whole height of the screen.
CSS Responsive fullscreen video: do we really need it?
Nowadays many people surf the web from their mobile phones. If you have set a CSS background video on your website, you may be wondering how to make it responsive.
Well, personally we think that playing a background video on a webpage may not be a good idea if the user is browsing the page on his mobile. Let’s ask ourselves again the key question: why did we choose to have a fullscreen video from the start? Because we want to impress the user, catch his attention and give him an amazing user experience. Are we going to achieve this goal on a tiny mobile screen? I’m afraid not. In addition, data charges and loading times are also something to take into account.
Nevertheless, this is just a personal opinion and the final decision depends on the underlying reason that you have to put a fullscreen video on your web. That’s why on this tutorial we will also take into account that you may want to set a responsive fullscreen video.
Playing a responsive fullscreen video on mobile
If you want to play a responsive background video on mobile then add the playsinline attribute to the video element. This will play an embedded video on mobile devices. You must also use the autoplay and muted attributes along with playsinline.
<div class="video-container">
<video autoplay muted loop playsinline poster="cake.jpg">
<source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
</div>
<!-- end of video-container-->
Code language: HTML, XML (xml)This will auto play the responsive fullscreen video on mobile browsers on loop like a GIF.
Replacing the fullscreen video with an image on mobile
If you prefer to remove the background video on mobiles, we suggest replacing it with an image. To deal with this, we can use a media query:
@media screen and (max-width: 768px) {
html{
background: url("https://images.unsplash.com/photo-1620222071550-a5c7f8b600ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDY4NDIyNA&ixlib=rb-1.2.1&q=80&w=400");
background-size: cover;
}
.video-container{
display:none;
}
Code language: CSS (css)The media query detects if the size of the display screen is less than 768 pixels wide. If so, then we hide the video-container and instead display a static image. The heading and button will now be displayed on top of the background image instead.
2 common mistakes to avoid on CSS background videos
Now you are almost ready to create your own fullscreen video! However, before we end this tutorial, we want to warn about some common mistakes when using background videos.
Fullscreen videos can delight your users, but they can also be their worst nightmare. Have you ever entered a website where the background video is so noisy that you what to leave that site immediately? I’m sure you did have such kind of experience… Of course, we do not want to cause such a negative impact on our users. That’s why we have to remember 2 simple gold rules when setting a fullscreen video.
Silence, please
We want the user to keep calm and relax while surfing our web. Not to frighten him and make him run away. That’s we always recommend mute any background video that you place on your website. You can give the user the option to unmute it but keep it muted by default.
The shorter, the better
Time is gold. Do not “steal” this treasure from the user. Our video should not last more than 20-30 seconds long. A longer video can bore the user and give him reasons to leave your website looking for something else that doesn’t make him lose his precious time.
