Fullscreen Background Video HTML5 And CSS cross-browser

Fullscreen Background Video HTML5 And CSS cross-browser

 
 

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 HTML5 and CSS and make it compatible for all browsers.

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="" muted="" onplaying="this.controls=false" autoplay loop>
<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>

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, it will be more than enough!

  • width: to change the video width.

  • height: to change the video height.

  • 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!

  • preload: specifies whether the video can be preloaded when the page is loaded or not. This parameter can take the following values:

    • auto (default value): the browser decides whether to preload the whole video, only the metadata or nothing at all.

    • metadata: only loads the metadata (time, size, etc.).

    • none: no preloading. Useful if you want to avoid wasting bandwidth on your we

How do you cater for all browsers since they all recognize different video formats?

ou use the 

 tag inside the  tag to provide various formats. The browser will take the one it recognizes.

 

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 multiple video files as the source for one video player and different types of codecs.

<video playsinline="" muted="" onplaying="this.controls=false" autoplay 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>

A video can be preloaded in multiple ways by adding the preload attribute.

 

The following options exist:

 

  • 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

 

Despite of that, In our players we have not use this tag.

 

Why?

 

Safari on iOS 10+ supports inline playback of videos. Up until and including iOS9, web videos, when played, would show full screen on the device. To enable inline playback need to use the playsinline attribute: playsinline.

 

A video can be auto played as soon as it is ready by adding the autoplay attribute.

 

If you wish the video to play in a loop you can use the loop attribute.

 

Step 2. Make a CSS file and define styling

 

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 ?

 

Let's see our 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);
}
.sldtext {z-index: 2;}
#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%; } }

And our html:

 

<div id="fullwidth-video">
<div class="fullwidth-video-bg">
<video playsinline="" muted="" onplaying="this.controls=false" autoplay 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>

 

 

It worked perfectly for us

And for you?

Do you have any other ideas or suggestions?

 

 
 

tags: html5 video css3 background Background Video edge safari Chrome


We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .