CSS Full Screen Video Background Tutorial
You can enrich the look and style of your website and grab the attention of your visitors with a catchy background video. In this tutorial, I will show you how to add a full screen video to your web page's background.
The recent advancements in web technologies such as HTML, CSS and JavaScript opened new gates to web designers and Internet users, which made things possible, that were once even unimagined. The rise of HTML5 and CSS3 brought a lot of new and shiny things that we, as the builders of the world wide web, can now efficiently use on our websites and applications to provide better, more meaningful, fun and engaging user experiences.
Two of such features that have been widely used on many modern websites -I am sure you came across both before- are full screen background images, which I explained how to do with CSS in another tutorial, and full screen background videos, which I will be talking about in this tutorial.
Like most new trends, using a video background might be tempting to you at first, but you should use it with care, taking into account the important points I will mention in the next section.
Before You Embed a Video Background on Your Website
Video is cool. Video backgrounds are cooler. However, "cool" does not always mean "better" when it comes to presenting your message, sharing your information or displaying your product on a website. Before you decide to use a video background on your site, you should make sure that not only it is relevant to your whole site in terms of its content but also that it matches your site's layout, style, colors and general theme. Simply put, do not use it only because "you" think it is cool, because often times this way of thinking results in bad web design. Think from your visitors' perspective instead, and use it only if it makes sense and enhances your website's message.
Video Size, Bandwidth and Video Quality
Video files are usually much larger than text and image files (they may be many GBs in size), hence the size of the video file, the bandwidth it will consume at your hosting and more importantly at your visitor's device are crucial points in deciding whether to use video or not. While maintaining a certain level of quality, you should optimize your video file as much as possible and try to keep it no larger than a couple of megabytes.
Video Length and Audio
The length of the video should also be optimal. Not too short (3-5 seconds) so that it becomes tiringly repetitive to the eye, and not too long (1+ minutes) so that the visitor won't miss what the video has to tell. Recommended lengths for video backgrounds in most cases are around 15 to 30 seconds. Another thing to keep in mind is that autoplaying videos with sound enabled almost always irritates users and make them want to close the page as soon as possible, considering some of them might be accessing your website from their office or in a public spot. So, unless you really need to use audio, it is better to use videos with no audio in your backgrounds.
Browser Compatibility
Another thing to keep in mind is that not all web browsers work the same way, especially when it comes to video support. On mobile screens for example, it may be wise to hide the video background and display an image instead, since some mobile browsers may not support autoplay videos or videos at all.
Now, let's continue with adding a background video to a web page with the help of CSS.
How to Add a Background Video with CSS
Before we start, I should say that there isn't one single best approach to create full screen video backgrounds with CSS. As someone who aims for the least amount of code whenever possible, I tried my best to come up with the simplest solution I could find.
We will first create a basic HTML 5 page that we will use as a template for our video background page. The following will be enough to start with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Video Background Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Note the use of the meta viewport tag to ensure a responsive layout for our page.
STEP 1: Embed the Video on Your Page
We will use the <video> tag that was introduced with HTML5, to embed the video on our page like the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Video Background Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video id="video">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>
To briefly speak about HTML's video element, it supports three formats, which are MP4, OGG and WebM. Depending on which web browsers you will be supporting, you will need to prepare and host the corresponding video formats of the same video as separate files. In our example, we prepared our video in two file formats, video.mp4 and video.ogg.
As a side note, I will use a public domain video from https://archive.org/details/stock_footage just for demonstration purposes. If you don't have a video yet, you can find and download videos from free public domain video clip resources or create them yourself via a camera or by recording a short video on your phone.
You can learn how the video element works in detail here and check the current browser support for it here.
STEP 2: Make the Video Full Screen and Put It in the Background
If you open your web page after embedding the video, you will see the video covering a small area on the top left corner, as shown in the screenshot below:
In addition to position, width and height properties, I will use a relatively new CSS property, object-fit to fix the video in its position, make it full screen and align it at the center on different screen sizes. A negative value for the z-index property will help us move the video behind all other elements on the page, which have a z-index value of 0 by default.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Video Background Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin:0 }
#video { object-fit:cover; position:absolute; width:100%; height:100%; z-index:-1 }
</style>
</head>
<body>
<video id="video">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>
Frankly, this is the simplest and shortest CSS code that I could come up with. to create a full screen video background. Bear in mind that the object-fit property is not supported by all web browsers, e.g. Internet Explorer or Edge, yet. But it is supported by all the recent versions of other modern browsers (see this page for browser support). It is up to you whether to use this solution or not but even if you don't use it now, take note of it and put it somewhere where you may want to come back to when the object-fit property is widely supported.
Alternatively, you can use the following solution for better browser support:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Video Background Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#video { position:fixed; top:50%; left:50%; min-width:100%; min-height:100%; transform:translateX(-50%) translateY(-50%); z-index:-1 }
</style>
</head>
<body>
<video id="video">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>
I prefer the first solution over this one (unless you really need to support Internet Explorer and other older browser versions), since it is simpler and the second solution seems to be creating random one pixel lines on the left and top edges of the window when I resize the browser.
STEP 3: Video Settings
Now that our video is up and ready, we will finalize with its settings. Naturally, you will want the video to start playing when the page loads (after the video finishes loading). We use the autoplay attribute of the video element to achieve this. If your video has sound, you can add the muted attribute to the video element to disable the sound. Looping is also an important feature for background videos, which can be done with the help of the loop attribute.
Some videos may be large in size, hence they may take long to fully load before they start to play. In such cases, adding a placeholder image (poster) that will be displayed in place of the video is desirable. A good idea is to put the first frame of the video, or an important highlight from the video as the poster. If you prefer to use a different image as the placeholder, you can also use a stock photo or public domain photo.
After adding the video attributes and the poster image, our resulting code will be as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Full Screen Video Background Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin:0 }
#video { object-fit:cover; position:absolute; width:100%; height:100%; z-index:-1 }
</style>
</head>
<body>
<video id="video" autoplay loop muted poster="bg.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
<div id="content">CSS Video Background Demo</div>
</body>
</html>
Once the video is set up, you can then continue with adding content to your page and styling it as you normally do. The following is a sample for a page with full screen video background:
Final Thoughts
If used responsibly, video backgrounds may add life to your website but as mentioned earlier, use them with care and also make sure the content that you will display on the video is clearly visible/readable and doesn't mix with the video in the background.
More CSS Tips
How to Hide Scrollbars with CSS CSS Full Screen Background Image Tutorial CSS Tutorial: Div with Background Image CSS Tutorial: Div with Background Video CSS Browser Compatibility: What You Should Avoid Double Underline and Double Overline Text with CSS Designing a Simple Testimonial Box with CSS
CSS Tips