Full width responsive background video

Responsive background video

Responsive background video, now a days, a most common factor in latest websites, a video which is showing in full width. Even if we re-size the window, it continues to play while adjusting the dimensions (width and height) accordingly. Even though the dimensions are changed, no scroll bar will be produced. The width and height of the video is adjusted to fit the screen, irrespective of resolution or device.

How to create full width responsive video background

Before creating the full width Responsive background video, let us have a glimpse of the HTML5 video tag and video attributes. So that we can implement Responsive background video easily.

HTML5 Video Tag

If you are new to HTML5 Video tag, let us have a basic knowledge. The HTML video tag is used to embed video content in a document. The video element contains one or more video sources, to support different browsers.

Supported Video Formats

There are 3 supported video formats currently for the video element, ie. MP4, WebM, and Ogg. IE, Chrome, Safari, Firefox and Opera 25+ supports video tag. webM and ogg is not supported by IE and Safari but others do. To know more about the supported formats, read

Video attributes

There few attributes which can be added with the video tag. They are the following.

• autoplay: It specifies that the video will start playing as soon as it is ready
• Controls: It specifies that video controls should be displayed, ie. play, pauuse buttons.
• Loop: It specifies that the video will start over again, every time it is finished.Value is Boolean
• Height: Used to specify height for the video.
• Width: Used to specify width for the video.
• Muted: Used for audio output of the video to be muted.
• Poster: Specifies an image to be shown while the video is downloading, or until the user hits the play button.
• preload: Specifies if and how the author thinks the video should be loaded when the page loads.
• src: Used to add the url of the video.

Hope you have got a some idea about the video tag in HTML5. So we will proceed to add a video tag HTML and create Responsive background video.

HTML for Responsive background video

<video autoplay controls>
 <source src="video.mp4" type="video/mp4">
 <source src="video.ogg" type="video/ogg">
 <source src="video.webm" type="video/wemm">
 Your browser does not support the video tag.
</video> 

Inside the video tag, we need to add the different supported video formats using the source tag. Mention the video type also. A line which says ‘Your browser does not support the video tag’ to be included in the video tag. If the browser does not support the video tag, the message will be displayed. We have added the attributes height, width. The ‘control’ attribute will enable the video controls. When we use video as a background, we can avoid ‘controls’. Also, add loop, if you want the video to be repeated.

CSS to fix the Responsive background video

Here we will use few lines of css to fix the video as a background. Following is the css.

video {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

Make the video as position fixed/absolute, and using z-index, position it behind the main content. Add min-width and min-height. And width and height as auto. So that when displayed in different resolutions, it will occupy the full window.

Demo for Responsive background video