Create Fullscreen HTML5 Responsive Video Background

Fullscreen HTML5 Responsive Video Background

Are you look for a solution to add a responsive but fullscreen HTML5 video as background? And want to make it work with most of the major browser including mobiles?

In this tutorial, You will learn how you can do that without using any plugin. This can be done simply by using the CSS3 and HTML5.

You don’t need to rely on any Javascript.

By using images as the background is always a great thing which provides amazing visual impact. But what you think about adding video as a background in exactly the same manner.

Adding a background video effect is very easy and pretty much simple. In fact, this can be done by only using the CSS or CS3.

Note That: The Older browsers will no longer understand the video formats, but should still recognize the basic video tag (except IE8).

We know that the background or background-image properties only accept colors gradients, SVG as a value. so you may be thinking what about the video?

Well, We wil simply take help of HTML5 video element which helps us add video has a background. The HTML5 video already has some awesome features.

It includes autoplay, loop and mute. Not only this but we can also add the poster.

The poster element allows us to add an image which replaces the first frame of video. Therefore, it’s a great thing to add a poster to the first frame of the video. It will make look the video good for users.

How to Make Responsive Fullscreen HTML5 Video as Background

Let’s start how the HTML can be written. We will define <video> tag with the source. We added autoplay, loop, poster and define an ID video.

We include two different sources because we want to make sure that the video should work on all browsers. Some browser plays MP4 whereas some play WebM format.

The poster picture will be replaced by the first frame of the video when it loads, so it makes feel to derive that photograph from the same first frame.

<video autoplay  poster="images/poster.jpg" id="video by" loop>
    <source src="images/video.webm" type="video/webm">
    <source src="images/video.mp4" type="video/mp4">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>	

The Styling

To achieve a video that fills the screen for both width and height, we need to set the position fixed with top and left should be 50%.

In addition, you could also add a min-height:100% to ensure that you don’t get any vertical scroll bars. With this method, the min-width or height will always be used without any scrolling.

video#videobg { 
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	background: url('images/poster.jpg') no-repeat;
	background-size: cover;
	transition: 1s opacity;
}

For the older browsers, we create a background image for the element, using the same placeholder picture. At this degree, most effective Safari (mobile and desktop) requires the -webkit vendor prefix for transforms, so it has been included in the code.

if you’re also targeting Firefox 15 or earlier, you’ll need to include a -moz prefixed version of the transform.

You need to have now a video that fills all the available space on the display screen. As evidence of how this works; we’re telling the video to use the most available width or height, but as it will hold its aspect ratio. This may suggest, it will overflow over the full-screen size (unless you happen to be browsing in the perfect screen size).

Code ExamplesYou May Also Like