Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in this tutorial we will show you how to add fullscreen background video using only HTML5 and CSS and make it compatible for all browsers.
Before achieving this, there some factors you should consider:
- The video will likely be set to autoplay, but it should be muted by default; ideally, it should not include sound at all. (You can easily create an unmute button for the video with JavaScript).
- The video should display a placeholder image, falling back to a static background image for browsers that do not support HTML5. The placeholder image will also be used a background on mobile devices: many phones and tablets do not support autoplay, for obvious reasons.
- Length is important: too short a video can feel repetitive (as most such videos will be set to loop), while too long becomes a narrative unto itself, and therefore deserving to be a separate design element. I’d suggest a run time of approximately 12 – 30 seconds.
- Bandwidth is a big deal. The video needs to be small, and compressed as effectively as possible.
To Add Fullscreen Background Video It Takes Only Two Steps:
- Make a HTML file and define markup
- Make a CSS file and define styling
Step 1.Make a HTML file and define markup
We make a HTML file and save it with a name video.html
<video playsinline="" autoplay>
<source src="/assets/videos/my-video.mp4">
<source src="/assets/videos/my-video.webm">
<source src="/assets/videos/my-video.ogv">
</video> In this step we create video element and insert our background video and we also add some attributes required for the working of background video. ‘autoplay‘ is used to autoplay the video on page load, muted is used to mute the video sound and loop is used to replay the video after the completion.
The tag is recognized by all browsers, including Internet Explorer from version 9 (IE9).
But you may be disappointed if you only use this code. There’s no control to start the video!
Let’s add a few attributes:
- poster: image to be displayed instead of the video until it’s run. As default, the browser takes the first frame of the video, but as it’s often a black frame or a frame unrepresentative of the video, I advise you to create one! You can simply do a screen capture of any moment in the video.
- controls: to add the “Play” and “Pause” buttons and the scroll bar. This may seem essential, but some websites prefer to create their own buttons themselves and control playback using JavaScript.In our case, since it’s a fullscreen video, we’ll disable the controls
- loop: the video will be played in a loop.
- autoplay: the video will be played when the page loads. There again, don’t overdo this. A website that runs something all by itself whenever it’s loaded is generally irritating!
<video playsinline autoplay muted loop poster="my-video.jpg">
<source src="/assets/videos/my-video.mp4">
<source src="/assets/videos/my-video.webm">
<source src="/assets/videos/my-video.ogv">
</video> How do you cater for all browsers since they all recognize different video formats?
We will use the type attrubute to provide various formats. The browser will take the one it recognizes.
<video playsinline autoplay muted loop poster="my-video.jpg">
<source src="/assets/videos/my-video.mp4" type='video/mp4;'>
<source src="/assets/videos/my-video.webm" type='video/webm;>
<source src="/assets/videos/my-video.ogv" type='video/ogg;'>
</video> IPhones, iPads and iPods currently only recognize the H.264 format (.mp4 file)… and only if it appears first in the list! I thus recommend that you specify the H.264 format first to ensure maximum compatibility.
Not all browsers support all video containers and codecs. To suit all browsers you can provide different types of codecs.
<video playsinline autoplay muted loop poster="my-video.jpg">
<source src="/assets/videos/my-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="/assets/videos/my-video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="/assets/videos/my-video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>Although in this case, we didn’t need it, there is the possibility to insert the preload attribute
The HTML audio preload Attribute is used to specify the way the author thinks the video should be loaded when the page loads.
The video preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented.
<video preload="auto | metadata | none"> - none – no preload is done
- metadata – only the metadata is preloaded: dimensions, first frame, track list, duration, etc
- auto – the audio/video should start loading as soon as the page loads
We’ve been told before that we were going to disable the controls.
By design you can’t autoplay video, but it’s simple enough to remove the controls after playback has started, which I’m guessing is the effect you really want:
<video playsinline autoplay muted onplaying="this.controls=false" loop poster="my-video.jpg">
<source src="/assets/videos/my-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="/assets/videos/my-video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="/assets/videos/my-video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>Step 2. A Pure CSS Approach: define the style
Fitting portrait videos in landscape players using object-fit
The object-fit CSS property specifies how the contents of and , should be resized to fit its container. object-fit can take several values:
- contain – the video will be scaled to fit the container while preserving the aspect ratio, letterboxing will be present around the video
- cover – the video is scaled to fill the container while preserving the aspect ratio, the video will be clipped
- fill – the video is scaled to fill the container without preserving the aspect ratio, the video will be stretched
- none – video is not resized
Here’s a portrait video placed in a landscape video player using the object-fit:contain CSS. The video is scaled down to fit the container. The portrait aspect ratio of the video is maintained so as to not distort the video resulting in letterboxing on the sides.
But, how do we get a Fullscreen Background Video cross-browser ?
To maintain the proportions in the mobile devices, we will create a div, #fullwidth-video with the following characteristics:
#fullwidth-video{
height: 50vw;
min-height:50vh;
position: relative;
} Within it we will create an additional div, to which we will assign the class .fullwidth-video-bg.
We remind you that we are performing this procedure in order to obtain a full screen video that is functional and visible in all the browsers.
The style we will apply to our div, will be as follows:
#fullwidth-video .fullwidth-video-bg {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0% 50%; background-image:url(http://mysite.com/assets/images/bg/myvideobg.jpg);
}Using a background will allow us to omit the poster attribute in our code.
In this way, if the video was not supported by a browser, we would get a full-screen image.
Next, we will proceed to give a style to video:
#fullwidth-video video {
margin: auto;
position: absolute;
z-index: 1;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
visibility: visible;
opacity: 1;
width: 100%;
height: 100%;
object-fit: cover;
}As you will notice, we will use the object fit property.
The properties top: 50%;, left: 0%;, transform: translate(0%, -50%); visibility: visible; width: 100%; will allow us to perfectly center the video, while maintaining proportions.
As a final step, we will proceed to fix a bug in Edge that prevented us from viewing the video correctly.
To fix this problem, we simply added the following lines of css, specifying the application for Edge only.
@supports (-ms-ime-align:auto){
#fullwidth-video video
{ object-fit:none;
margin:none;
position:inherit;
z-index:1;
top:50%;
left:0%;transform:translate(0%, -50%);
height:auto;width:100%; }
} And now let’s see the full code.
HTML
<div id="fullwidth-video">
<div class="fullwidth-video-bg">
<video playsinline autoplay muted onplaying="this.controls=false" loop>
<source src="/assets/videos/my-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="/assets/videos/my-video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="/assets/videos/my-video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
</div>CSS
#fullwidth-video{
height: 50vw;
min-height:50vh;
position: relative;
}
#fullwidth-video .fullwidth-video-bg {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0% 50%; background-image:url(http://mysite.com/assets/images/bg/myvideobg.jpg);
}
#fullwidth-video video {
margin: auto;
position: absolute;
z-index: 1;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
visibility: visible;
opacity: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
/** For Edge**//
@supports (-ms-ime-align:auto){
#fullwidth-video video
{ object-fit:none; margin:none;position:inherit;
z-index:1;
top:50%;
left:0%;transform:translate(0%, -50%);
height:auto;width:100%; }
} It worked perfectly for us
And for you?
Do you have any other ideas or suggestions?
https://www.ma-no.org/en/web-design/fullscreen-background-video-html5-and-css-cross-browserRead also: How to Create a Video Background With CSS
https://blog.hubspot.com/website/video-background-csshttps://ravenousravendesign.com/web-design/how-to-bulk-optimize-video-for-website-backgrounds/https://css-tricks.com/full-page-background-video-styles/http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-VideoHTML Video Tag not working in Safari and iPad (stackoverflow)
How to create HTML5 videos and Embed Videos – Dani Krossing (YouTube)