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 : 43986  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 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

How to trim a video without downloading programs

You recently experienced one of the most epic concerts in recent years and now you're in the process of showing the videos you recorded to friends and family who, unfortunately,…

Google Play Games on PC: Transforming Your Gaming Experience

Do you want to play your favorite Android games directly on your computer? If your answer is yes, you've come to the right place! In today's guide, I will explain…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

How to download any video from any website

If you have ever seen a video that you really liked and you would have liked to have it on your computer, but you didn't know how, from now on…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

The history of video games: from entertainment to virtual reality

The release of Return to Monkey Island (September 2022) has jogged video game fans' memories back to 1990, when The Secret of Monkey Island debuted, a graphic adventure based on…

The first videogame tournaments: the origin of eSports

The first video videogame tournaments: the origin of "eSports". Electronic sports or "eSports" are video game competitions that have been increasing in popularity over the years, being a lucrative sector that…

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,…

Clicky