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
Tóm Tắt
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?
MENSAJE
OPERACIÓN EJECUTADA
We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking “Accept all” you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select “System Cookies Only” to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on “settings”.
Accept All
Only sistem cookies
Configuration
Manage Consent Preferences
Strictly necessary cookies
Always active
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be disabled on our systems. They are generally only set in response to your actions in requesting services, such as setting your privacy preferences, logging in or completing forms. You can set your browser to block or alert you to these cookies, but some areas of the site will not work. These cookies do not store any personally identifiable information
Performance Cookies
Performance Cookies
These cookies allow us to count visits and traffic sources so that we can assess the performance of our site and improve it. They help us know which pages are the most or least visited, and how visitors navigate the site. All information collected by these cookies is aggregated and therefore anonymous. If you do not allow these cookies to be used, we will not know when you visited our site and will not be able to assess whether it worked properly
Functional Cookies
Functional Cookies
These cookies allow the website to provide better functionality and customization. They may be set by our company or by external providers whose services we have added to our pages. If you do not allow these cookies to be used, some of these services may not function properly
Targeted Cookies
Targeted Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to profile your interests and display relevant ads on other sites. They do not directly store personal information, but are based on the unique identification of your browser and Internet device. If you do not allow these cookies to be used, you will see less targeted advertising
