Fullscreen Background Video HTML5 And CSS cross-browser

by Silvia Mazzetta Date: 10-05-2020 html5 video css3 background Background Video edge safari Chrome


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:

  1. Make a HTML file and define markup
  2. 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?

 
by Silvia Mazzetta Date: 10-05-2020 html5 video css3 background Background Video edge safari Chrome hits : 36441  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Related Posts

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to use your browser as a file browser, in Chrome or Microsoft Edge

We're going to explain how to use the Chrome browser as a file browser, both on Android and on your computer. This is a hidden feature of Chromium that will…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

MAME Multiple Arcade Machine Emulator: How to download and configure this arcade emulator for Windows

Despite the fact that new state-of-the-art computer games are coming out every so often, the whole retro theme is very appealing to users who are looking to relive the long…

How to Unlock Secret Games in Chrome, Edge and Firefox

Your web browser is full of secrets. I usually spend a lot of time studying new features that I can unlock through pages like chrome://flags and about:config in the browser,…

How to move Chrome, Firefox or Edge cache to save space

Caching is a technique used by many programs to improve their performance, especially for applications that run over the Internet, such as streaming programs or web browsers. This technique consists…

How to turn your smartphone into a webcam for your pc

With the propagation of Covid-19 we all had to adapt to a new quarantine situation at home, and since the human being needs to communicate constantly, we used the internet…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

Best ways to start a video conference without registration

Nowadays it is very easy to make a video conference without using Whatsapp, Skype or any of those platforms that require user registration, phone, email and so on. Today we will…

Is Old School RuneScape Still Popular?

Since the launch of RuneScape 3 there are two versions of RuneScape running simultaneously: RuneScape 3 and Old School RuneScape. At first glance it seems that having two iterations of…

The best collections of Royalty free videos for social networks

If you are looking for videos that can be edited and uploaded to social networks, pay attention, because we have here a great list of websites that offer this type…

Developing a JavaScript video game: Part 3

Here we are! We're back with the third part of the article . If you missed it, read the first part or the second one. So, now you may be able to…

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