Coding - HTML5 - CSS3

How To: HTML5 Background Video

Web design has changed significantly through the years, from static HTML pages to fully animated, interactive sites that respond to users.

Videos play an important role in sharing unique content, they are ubiquitous on the web; and for certain sites videos are a must. If you want to show a video on your site and you want to create an engaging experience, consider incorporating a background video.

In this article, I’ll show you a brief overview of the latest technology for creating a background video; and share a few well-executed examples to inspire you.

In 2014, the trend for websites is long-scrolling, minimalist design accentuated with modern typography design elements that leads the eyes to focus on the content. Nothing says modern like using a video background, both because video is a rich medium in which to convey content and secondly because when video is implemented well, the result can be visually stunning.

Before you begin the design process for implementing a background video on a site, you need to think through the content you want to present, and investigate what type of video will resonate with your audience. Below, I will share some examples of websites that have implemented a video background beautifully.


Dadaab Stories
This tumblr site plays videos of people going about their day in a refugee camp. Video is much more effective at quickly sharing stories and giving us a glimpse of camp life than words would ever be.


Matter Design
Matter is a design agency that used background videos of individual’s faces for their site. Because so much of the focus is on the background, the navigation is composed entirely of a single drop-down menu. Matter is using flash for the video, so their site is not responsive and doesn’t work on an iPhone.


Drexel University
Drexel breaks the mold from traditional universities sites by using different background videos that resonate with their audience — students. This site uses HTML5.


HTML5 Video

Before browsers started supporting HTML5, videos could only be played with plug-ins (like flash). HTML5 defines a new element: video that allows embedding of videos on a web page.

Sample HTML5 Code

<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.webm" type="video/webm">
          Sorry, your browser does not support HTML5 video.

Sample CSS3 Code

#videobcg { 
     position: absolute;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;

With CSS you can control your video to create the background effect. Let’s break down the code.

position:absolute; – This code anchors the video within the top left section of the browser. Using absolute ensures that the z-index property will work.

width: auto;
height: auto;
min-width: 100%;
min-height: 100%;

With the auto element, the browser will automatically calculate the height and width of the video. With min-width and min-height: 100% the browser will show at least 100% of the video.

z-index: -1000; – this property positions the video in the background, as it has a negative value it pushes the video “to the back” so that other elements can be placed in front of the video (like navigation).

overflow: hidden; – Anything over 100% is hidden by the browser.

Video Formats and Browser Support

There are three supported video formats for the <video> tag element: MP4, WebM, and Ogg/Ogv. These video formats are all encoded differently and supported by different browsers. The list below shows what video formats are supported by each individual browser.

  • Android devices – MP4
  • Google Chrome – WebM, Ogg
  • Mozilla Firefox – WebM, Ogg
  • Opera – WebM, Ogg
  • Safari – MP4 (including iPhone)
  • Internet Explorer 9 – MP4
  • Internet Explorer 6-8 – No HTML5, flash only

Internet Explorer and Safari do not support WebM and Ogg formats, so your best bet is to always use MP4; which is supported on major browsers.

If you want to offer the best user experience, I suggest you use MP4 and either Ogg or WebM, with WebM being preferred. WebM is a project backed by Google (and supported by YouTube) and will most likely become a dominant video format in the years to come.

Thinking Ahead

Videos are not going away! Now that browsers offer better support for playing videos, the tendency is for videos to become even more integral to web design.

If implemented correctly, no matter what technology you use, a video background can add a dynamic feature to your website creating an engaging and captivating experience for your users.

About the author

Patricia is the Founder of Upwards Content, a fledgling content creation/management business. If you like my articles, follow me on Twitter!

Share this post


  1. Iain Duncan

    It would be worth mentioning in this article that none of the html5 video backgrounds work in iOS because of Apple’s autoplay and overlay video restrictions.


  2. Simon Coudeville

    Hey lain,

    I noticed that recently. Any workarounds you have seen?

  3. Michael

    Thank you for the browser support part, helped alot.

  4. Hi, thanks i like it, but unfortunately not working on iPad background video.

  5. stephanie

    thanks so much for the article, i am having such a hard time figuring this out as I am truly a beginner. any tips on how to acquire the code needed for the actual video file? For example in HTML5 the code calls for a “movie.mp4” what do I need to do to take a video from my computer and get a code or link for me to be able to use it in this html code. Im sure thats a stupid question, since I can’t find the answer anywhere but hopefully someone can help me out, thanks!

  6. Android and iOS usually don’t support autoplay of the html5 video tag. The only alternative I found is decoding the video using javascript. Here is a library for mp4/H.264:

Leave a Comment

Subscribe To Our Newsletter