Fullscreen Background Video using HTML5 and CSS

By November 27, 2014CSS, HTML5, Programming

Every now and again I stumble upon beautiful and engaging landing pages which have a beautiful fullscreen video loop playing in the background.  Since in the present we can’t simply set a video for the background-image in CSS, I want to show everyone how to accomplish this UI Design technique using HTML5 and CSS, plus a touch of JavaScript to make IE happy (somewhat). Just a heads up since I’ve had a lot of people ask in the comments below…  Unfortunately, iOS devices (iPhone & iPad) and I’m assuming Android do not support background videos.  This is why the “poster” image will be very important for you to include as well.

See Demo

(Prepare to get a little dizzy. Sorry. It was a quick 360 video I took on the beach.)

Before we get started there are a few things worth mentioning:

  • This technique relies on a video loop and will likely be set to auto-play.  If your loop is too short it’s going to quickly look SUPER REPETITIVE repetitive repetitive.  If you can find a loop around the 20-30 second mark, you’re in great shape.  Also, for the sake of every internet user on the planet, please oh dear lord please be sure your video is muted upon playing.
  • Not all browsers will support HTML5.  That’s right, I’m looking at you IE!!!  That said, and for the unfortunate people who still use  IE to browse the interwebs, you should include a placeholder image as backup.  More importantly this will be used for the background on a majority of smart phones and tablet devices.
  • Video compression is important.  You want your video to load fast yet at the same time look good.  Do your best to keep the video under 5MB at all costs. If you can get it around 1MB you’ll be in much better shape to provide a good experience for visitors with a slower connection.

1) Let’s start rockin’ by setting up the HTML5

Few Important Things: The order in which the video files are served is crucial. There is a bug in Chrome that won’t autoplay the .webm video if anything else comes before it. Also, a Pro-tip: Set the default background image to the first frame of the video since this will load first. It will look much more natural once the video starts playing.

<video autoplay loop muted poster="vid-first-frame.jpg" id="video-bg">
 
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
 
</video>

2) Only some pretty basic CSS left to do.

#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}

It’s that simple!

Note for IE 8 & 9:

IE8 and HTML5 don’t play nice together. Actually, the don’t play together at all. As you can imagine, this is a bit of a problem for techniques like this one. Since we need to at least have some style control for the <video> tag we’re going to need to include a conditional line of JavaScript that looks like this.

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

 

Then inside your CSS file you’ll need to:

video {display: block;}

 

The last thing you’ll need to do in order to get the video to play in IE 8 is to edit your .htaccess file since IE doesn’t recognize the video formats. Open .htaccess and add this.

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv

 

Here are 3 FREE VIDEO LOOPS

I’ve already compressed these and are ready for you to use when you try out this method. Don’t worry, the dizzying video loop in the demo above isn’t included.  Enjoy and please share the love.

Pay with a Tweet to download

 

Like this article? Find a problem or a bug? Feel free to comment below and let me know.

  • Richie Dood

    cool how do you add text over the top?

  • nick.D

    Great tips. do you have suggestions on the types of video to us to achieve a smooth loop such as video compression rate, length, size, resolution, or any other pertinent information? Thanks in advance.

  • dcanon223

    Thanks for your help. I still can’t get it to work in IE 8. Chrome and Firefox works fine however.
    I did place the video {display: block;} inside the CSS but maybe I’m putting the conditional line of java script in the wrong place. Any advice? I would really appreciate it. Thanks.

    • Kevin Fremon

      Hey D,

      Yeah, IE can be a tricky bitch, can’t it? IE doesn’t recognize the video formats as something it can play inside a tag. I believe what you have to do is edit the .htaccess file and add these three lines.

      AddType video/mp4 .mp4
      AddType video/webm .webm
      AddType video/ogg .ogv

      Let me know if that works for you. I don’t have IE on my mac so I’m not 100% certain. If it does, I’ll add it to this post.

      • dcanon223

        Thank you so much Kevin, it totally worked!!! I spent hours on this last. I can’t thank you enough.

        • Kevin Fremon

          Great! Glad it worked. Just updated this post incase others run into the same issue.

          • dcanon223

            Oh my mistake, I realize that its actually IE 9 that I have and not IE 8. The same might go for IE 8 as well but I’m not sure. Had to correct this. Sorry.

  • not working on iPad can you check!!

    • Keef Buckley

      iOs and other mobile formats do not fully support HTML5 and CSS3 as yet, especially video backgrounds. I would recommend that you use a placeholder image in your mobile css instead.

  • Thank you! 🙂

  • Ken St.Denis

    how to make the bg vid fill the “entire” screen, full width is easy, but you still have the browser controls at the top, how do we get rid of them

    • Kevin Fremon

      Hi Ken,

      Do you have a link that you can send me so I can check out your markup and tell you how to fix your issue? Without seeing it, my guess is that you need to nest your top nav div inside of the container which is displaying your video and position is accordingly. Something like this.

      Hope that helps.

  • Ronen

    Hi Kevin,
    Great post. Thanks!

    I was wondering if I may ask you a question:
    I have a 1920×600 video, and I was really hopping to get it to adapt to the mobile/screen resolution.
    I’m not sure this can be done, but if there is a way, I guess all other readers might enjoy the benefit of learning it.

    In case there’s no good way you know to preserve the proportion of the background, as image shrinks, do you know a good way to keep the focus on a certain plan in the video, as the responsive canvas shrinks ?

    Thanks,
    Ronen.

    • Kevin Fremon

      Hi Ronen,

      Happy to hear that you enjoyed the post.

      Unfortunately, due to restrictions with iOS, video backgrounds will not work on mobile devices. At least I know they won’t on Apple devices. I would suggest that you take a screen capture of one of the frames in your video and use it as a fallback background-image on the #video-bg. You can use CSS media queries to target which background images you want to display depending on the various device sizes. That make sense?

      Good luck and let me know if any questions come up trying to get it to work.
      Kevin

      • Ronen

        Thanks Kevin,

        lets forget mobile devices and focus on the various screen sizes of desktops and laptops.

        they still vary from 1920 ro 1366 to 1024.

        If I wanted a background for a specific container that would shrink from 1920px to the smaller screens ( shrink not crop), any way to do it ?

        I also wanted only a stripe of the video, to occupy part of the screen and not be the permanent background, but a scrolling one that would disappear as user scrolls down to see the next containers.

        Is this doable ?
        Thanks,
        R.

        • Kevin Fremon

          Yep, it sure is. Take a look at this quick demo page I created for you to make sure we’re on the same page with what you’re trying to achieve. I’m pretty sure we are.

          http://kevinfremon.com/demos/video-bg-container.html

          Here is what you are going to need to do…

          Nest your container inside of two outer containers like this.

          Then add your CSS:

          .video-container {
          min-height: 600px; (or what ever you want to define)
          padding: 0;
          overflow: hidden;
          }

          .video-inner {
          position: relative;
          display: block;
          }

          #video-bg {
          position: absolute;
          top: 50%;
          left: 50%;
          width: auto;
          min-width: 100%;
          height: auto;
          min-height: 100%;
          z-index: -100;
          background: transparent url(video-bg.jpg) no-repeat;
          background-size: cover;
          background-position: center center;
          opacity: 0.5; border: 1px solid red;
          transform: translate(-50%, -50%);

          }

          Hope this helps and please let me know if it works.

          Kevin

          • Ronen

            perfect… thanks !

          • Jianu Andrei

            Hi, I just tried your example from above and works perfectly on all browsers, but I have a positioning problem on Safari. The video is not on the whole width of the container, it starts from middle and cut in half.

            Unfortunately I cannot send a link, as I work on localhost. But the problem also is present in your demo. Maybe you have a workaround for this?

            As I said, the problem appears on Safari. (my version 8.0.8)

            Would appreciate your feedback!

  • stephanie

    thanks so much for the article, i am having such a hard time figuring this out as I am truly a beginner. i am building my website through a 3rd party web builder that allows html codes….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!

    • Kevin Fremon

      Hey Stephanie. If you’re using a Mac (like I am) this will be pretty darn easy. All you need to do is open up the video you want to use in iMovie which you should have on your mac. If you don’t yet, it only costs $5 in the app store. Once you have your movie in iMovie, click FILE in the top left of the screen, then SHARE, then FILE. It will give you a few options. I’d recommend saving it out at a small to medium size. Once you have the movie.mp4 file saved to your desktop, go ahead and uploaded it to your website. There should be options for that in the 3rd party web builder you’re using. If not, you can always use dropbox or something like that as well. Once it’s uploaded, copy the full URL string of where it’s hosted. For example. http://yourwebsite.com/movie-folder/movie.mp4.

      Does this answer your question? Also, what 3rd party web builder are you using?

      Good luck!
      Kevin

      • stephanie

        thanks so much for the reply! I don’t have Mac unfortunately, but I may be able to get access to it for the sake of this project. I am using moonfruit to build and host my site. still trying to see how to locate the file url, not seeing an area for that as of yet

  • Gaurav Sharma

    I’ve used bg video on a site but problem is it is not playing on mobile devices. I understand the reason behind this. Just want to know the solution. How i can add call to action, only for mobile devices, So that when user tap the screen it start playing the video. It is autoplay on desktop website and working perfect but right now i can only see poster image on mobile.

    • Kevin Fremon

      Hi Gaurav,
      Unfortunately mobile devices (especially iOS devices) don’t support video backgrounds, hence why a background placeholder image of the video is needed. The easiest way to play video on mobile is by embedded a youtube, vimeo, or other supported players. The problem is that you won’t be able to overlay content on them to get the effect of a background image.

      Hope that helps.
      Kevin

  • Jovin

    Hi,

    Its a really good post, i have tried making my site’s video background fill the background on IPADs when i put it on landscape mode, but it doesnt seem to work.Is there a way to make it cover the entire background?

    • Kevin Fremon

      Thank you! I’m glad you liked the post. Unfortunately, iPads or iPhones don’t support video backgrounds at all. So what you’ll need to do is make sure you have the placeholder background image that is used in it’s place when viewed on those devices.

      • Brandon James Deutsch

        Hey Kevin, I know it’s probably a lot to ask, but what is the best way to go about displaying alternate content when on a mobile device such as an phone or tablet? I currently have a YouTube video background on my site but, as you know, it displays the YouTube text and button instead. I’m new to this so any info would be appreciated.

      • Nat

        So Airbnb background video in their homepage doesn’t play?

  • MNNer

    Great explanation 🙂 thanks for your post, btw, do we need to have the video in 2 formats (.webm and .mp4) I’m new on this.

    Thanks a lot.

    • Kevin Fremon

      Thanks! I’m glad it’s been helpful to you so far. Yes, you will need to have the video in both formats. There are tons of free online video converters that you can use if for example you have an .mp4 but not an .webm. I’ve used this site in the past and it’s worked well for me. I’m sure there are many others, but this does the job just fine. http://www.zamzar.com/convert/mp4-to-webm/

      Hope that helps.
      Kevin

  • Keef Buckley

    Thank you for the code, I would highly recommend http://video.online-convert.com/convert-to-webm to convert mov to webm, the files if done right are only 2 to 3mb in size.

  • Israel Goldwaser

    We’ve developed a new HTML5 player that plays with transparency and looks exactly like the old Flash player (not with a white background – real transparency over Chrome and FireFox browsers). Here’s an example:

    http://videostir.com/html5/

  • Nat

    Thanks for the article. My video doesn’t loop in Chrome though.

  • I use WP Profit and knock these out all day long with no coding. http://Holanet.tv

  • Billy Corbin

    Hi, great article! Also a lot of interesting and original things here – widescreen vj loops!