Background video

How to place a video into the background using CSS.

The Early Bird...

...has the best holiday

Boat rentals in France

Click here and be impressed in 60 seconds

What ever your reasons in wanting to do this, the HTML and CSS is  fairly simply and can be fairly responsive when  needed. However on Android platforms as auto play is disabled the video will remain “paused”.

You’ll need 3 DIVs as shown in the diagram below.

Background video DIV

1st DIV is a container which will hold the the display, set the width as required.

2nd DIV  contains the video  which will be in the background and is placed  using an absolute position on top and left.

3rd DIV  will display  all the foreground content such as text and images. This is also placed with in an absolute positon within the 1st Div, we change the z-index of this 3rd DIV so it is placed “on top” of the 2nd DIV.

You can style the text as you want, place images or whatever in the 3rd DIV. This can of cause be dynamic data.

The video element does not display any controls and is set with a preload and autoplay.

You’ll want to use  video formats that are compatible with as many browsers as need, in the above demo I’ve used MP4 and M4V.

The  HTML5 tags used in the display

The CSS3 styles

 

Make this responsive for mobile and handheld devices

Remember that background videos will not work on most mobiles as they require a manual click by the user to start the playback. So it’s worthwhile using a media query for small screen sizes and hiding the video layer to display a static alternative image.

We need to add a media query to the CSS for screen sizes, so we’ll change some of the code

/* Default hide the video on all devices */
#video{display:none}

/* Default display the image to replace the video on all devices */
#videosubstitute{display:block}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}

Hire us!

We're available for

HTML projects

Click for more CSS

If you change your window size to less than 992px wide, the video will not display, but the replacement image will and vis-versa  of course.

Modified HTML

Modified CSS3 styles

Do you like CSS?
Check out our “Nevermind CSS” project, you may be inspired.

On the next page we’ll look at displaying  a full screen background video

We love coding and colours