Creating a fullscreen HTML5 video background with CSS

Fullscreen background has become very popular in web design lately. Fullscreen images used as backgrounds have an amazing visual impact, but did you know that you can use video background in exactly the same way?

Video is probably the number one way to draw attention. A good video background can easily make people stop and take notice, increasing the time they spend on the site. This extended time on the site could potentially lead to more interaction with other content on the page.

Pulling off the video background effect is pretty simple. In fact it can be done using only CSS only. CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values. So what about the video?

We create a simple HTML5 video element with loop, autoplay and muted attributes and place it inside a container element. The image used in a poster attribute will be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.

Add a few simple lines of CSS.

Now our video element has the width and height of the viewport (our browser window). This is a problem because in most cases our video element aspect ratio will be different than our video source aspect ratio (in this case 16:9).

Our video background in a viewport that doesn’t match 16:9 aspect ratio
Our video background in a viewport that doesn’t match 16:9 aspect ratio.

Notice the white space on the top and bottom of the screen. We can fix this by stretching our video viewport to be larger than our browser viewport. We’ll make it taller or wider depending on the browser viewports aspect ratio. We can achieve this using media queries. Looks OK except now, when we resize the window, the video doesn’t center itself.

Background streched but not centered
Background streched but not centered.

The easiest way to fix this is to stretch the video to be taller and wider than our screen then use the negative margins to centre it.

That’s it! We have a full screen video background for our website!

One more thing we should do is hide the video on mobile and just show the background image. This is because most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. In this example we will use the same image that is used for poster attribute in the video. Keep in mind that using display: none on the video element won’t prevent it from downloading.

Final CSS

DEMO PAGE

NOTE: Video used in this demo was taken from this link.

More posts about background videos

Tips for using background videos on the web
Creating a fullscren HTML5 video background playlist

Article update – January 8, 2016

While I was writing the original article I was trying to avoid using CSS3 transform property since I knew it wasn’t supported in IE8. One thing that slipped my mind back then was that HTML5 video element also isn’t supported in the mentioned browser.

So with IE8 out of the way, let’s simplify the CSS used to create a fullscreen video background by using CSS3 transform.

As you can see, we removed the aspect ratio media queries and used the transform on our video element (.fullscreen-bg__video) instead. The fullscreen background video behaviour remains the same as you can see on this DEMO PAGE (which shares the same HTML markup as the first one).

This new code will work in all major browsers. As I said, it won’t work in IE8 since it doesn’t support CSS3 transform property. But you don’t have to worry about that since IE8 also has no support the HTML5 video element. So if you don’t plan to implement any fallbacks for the video element, go ahead and use the new code.

  • jorden

    This is incredible! i’ve been trying to do this for a couple weeks now and this tutorial finally got it working. I do have one question. On a “One-Pager” website where the whole website is scrolling, can you have the video be the background on just the first section then have it disappear when you get past the original height of the video?

    Thank you!

    • Luka Čavka

      Hi jorden. Im glad you found the tutorial helpful.
      Sure, you can make the video fit just one section and prevent it from scrolling along with the website. In fact, we did something similar here http://www.macmillannewventures.com/ . Take a look.

  • jorden

    This is incredible! i’ve been trying to do this for a couple weeks now and this tutorial finally got it working. I do have one question. On a “One-Pager” website where the whole website is scrolling, can you have the video be the background on just the first section then have it disappear when you get past the original height of the video?

    Thank you!

    • Luka Čavka

      Hi jorden. Im glad you found the tutorial helpful.
      Sure, you can make the video fit just one section and prevent it from scrolling along with the website. In fact, we did something similar here http://www.macmillannewventures.com/ . Take a look.

    • We create a simple HTML5 video element with loop, autoplay and muted attributes and place it inside a container element. The image used in a poster attribute will be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.

  • Paul Ratchford

    Luka, thanks for this. It’s great. But I can’t seem to get the video to display none for mobile. Any thoughts? clearspace.tv is the URL.

    • Luka Čavka

      Hey Paul. I visited your page. Seems like you figured it out on your own. Your video is hidden for devices with screen sizes smaller than 768px.

  • PR

    Luka, thanks for this. It’s great. But I can’t seem to get the video to display none for mobile. Any thoughts? clearspace.tv is the URL.

  • anuj

    thanx Man

  • Mikol Colucci

    Hi Luka, thank you so much for this but I can’t seem the video on mobile. This is URL http://www.meshi.it/prova.html can you help me?

  • Jacksenn

    GREAT WORK! Thanks

  • BigZee

    works gr8 except on chrome…any reason for this?

    • Mark Arndt Lønquist

      I know you wrote this 2 months ago, but the solution to this problem is to place the .web video first, like this:

  • Pingback: MJPG animated gif Video motion Website | Pearltrees()

  • Steven

    Hi, how would i make say 3 to 4 videos play in order (each video is about 15 seconds and 800Kb in size) can you make it load the first video and play and then play video 2, 3 and 4 then repeat.

  • Mikhail

    Author, thank you from Russia! 🙂

  • Robert

    Hi Luka,

    Love it so easy!. Thank you. Though I am having trouble when I insert controls for it to work in Safari. Any ideas

  • Tim Sairanow

    Hello Luka!

    According to the specification line: source src=”video/big_buck_bunny.ogv” type=”video/OGV”

    should look like: source src=”video/big_buck_bunny.ogv” type=”video/OGG”

    isn’t it so?

    Have a nice Day!

    • Luka Čavka

      Hi Tim.
      You are right! Should be OGG. Thanks for pointing that out.
      I will correct it in the demo example.

  • Josh Rasmussen

    Works on chrome but not IE explorer…

  • Josh Rasmussen

    Wait, it works on chrome and IE … I just failed to refer to the stylesheet correctly. My bad. 🙂

    Thanks for your post. Very helpful!

  • Tristan Tay

    hi Luka
    Thanks for the tutorial. I have followed the steps and it works offline but when i upload to my site the video did not appear. My site is tristantay.com. Appreciate your advice.Thanks

    • Luka Čavka

      Hi Tristan,
      I visited your page. Seems you managed to make the video work.
      Nice job!

  • Francis Jessie S. Enriquez Jr.

    hello Luka,
    thanks for the simple tutorial it’s really nice! how can i display the controls like pause, play, volume, etc.? Thanks you.

  • Francis Jessie S. Enriquez Jr.

    Videos with 720p resolution or higher won’t play why?

    • Luka Čavka

      Sorry for the late reply Francis. You probably figured it out on your own by now.

      As far as I know, there are no issues with HTML5 video player playing 720p videos.
      You should double check your code. Could be a wrong src URL.

  • Murat DEMiR

    Luka, thank you !!!
    Sound play and display add pls !!!

    • Luka Čavka

      Hi Murat! Sorry for the late reply, had a pretty busy month.

      To play the sound just remove the ‘muted’ attribute from the element.

      Unfortunately I don’t know what you mean by ‘display add’.

  • Thijs

    I’ve tried this with my own video, but it doesn’t response to the size. It doens’t center itself

    • Luka Čavka

      Hi Thijs!

      Don’t know if you missed the code in the 4th gist (below the image that says ‘Background streched but not centered.’).

      That piece of code should center your video. If it’s not centered right away, try adjusting the size (width, height) and position (left, top) values.

  • Lewis Warren

    how did you achieve this? I’ve looked a the code but cant work it out. I cant show you an example of the site im working on as Im working in localhost til it is fixed. do you think you could paste the correct code here for me? I really appreciate it.

    • Luka Čavka

      Hi, Lewis

      Can you can send me the zip file with your website? I could then fix the issue for you. I think that would be the fastest way to solve this. Pasting code here in the comments doesn’t seem very practical.

      You can also send me a stripped down version of your website, if you are concerned about your clients privacy.

      luka@slicejack.com

  • popngen

    Thank you Luka! Can you explain why you chose 300%? I’m trying to wrap my head around how you came to that value

    • Luka Čavka

      Hi popngen!

      I wish I can tell you that there’s some clever math behind it 🙂

      Got that number by looking at how the video behaves while resizing the browser window.
      300% stretches the video enough to cover most of the browser width/height combinations.

      It doesn’t have to be 300%. You can add more media queries (to define more screen sizes and aspect ratios) and different width/height and position values for the video. You’ll have to do some testing and see what works best for you.

      There are some jQuery background stretch plugins that recalculate the values as you resize the window. But since this is a pure CSS solution no such thing is possible.

  • Thank you Luka.
    Very helpful.

  • chandler

    Hi Luka – Thanks for this great tutorial. I’m having one problem with it, when I preview it locally on a browser it works great… When I upload it to my server the video does not play I just get a blank screen. Have you run into this before?

    Thanks. Chandler

    • Luka Čavka

      Hi Chandler,

      There shouldn’t be any problem with video playback when you upload the website.

      Is the developer tools console showing any errors?

      Can you provide a link to your website?

      • Dennis T

        Hi Luka. First this is great. But like Chandler my site tests well but then I upload it to the server and the video is gone. the size of the vid is 33mb mp4 and 8mb ogg but no webm. Any advice?

        • Luka Čavka

          Hi Dennis,

          You can do the following:
          1. Check the Developer tools ‘Console’ tab for any errors.
          2. Go to the ‘Network’ tab (Developer tools), reload the page and check if the video is being downloaded.
          3. Try adding a ‘preload’ attribute http://www.w3schools.com/tags/att_video_preload.asp

          Can’t really diagnose the issue without seeing your website.
          Please provide a link if you can.

  • JJ Spelman

    Thanks for this !!! It’s great. Any reason you can think of as to why it won’t loop in Firefox? ( http://j2studio.com/dannus/

  • Milkeo Gifs

    Very good work! How to make the video larger displays in portrait mode on mobile or tablet. Thank you 😉

    • Luka Čavka

      Hi Milkeo

      Video is hiden for all screen sizes below 767px. You will have to remove this part from your CSS:

      @media (max-width: 767px) {
      .fullscreen-bg { background: url(‘../img/videoframe.jpg’) center center / cover no-repeat; }
      .fullscreen-bg__video { display: none; }
      }

      • Milkeo Gifs

        Thank you 😉

  • Jesmin

    Thanks. 🙂

  • foo

    Thanks Luka, there is great for me. I have a problem that is on my website it seems a video not a background, it is have something wrong? below is my link.

    http://www.theroof.hk

    • Luka Čavka

      Hi foo

      I visited your website. Seems to me you implemented everything right. Don’t know what you think the issue is. Can you please try to explain what you mean by “it seems a video not a background”?

      Thanks

      • foo

        Hi Luka,

        When I right click on the background video, it is a video control panel. is it right?

        besides, How can i show the video background on the mobile or tablet?

        • Luka Čavka

          That’s OK, foo

          The right click should open the video controls.

          If you want to avoid this add “pointer-events: none” to your .fullscreen-bg element.

          To show video on mobile you have to remove this part of the CSS:

          @media (max-width: 767px) {
          .fullscreen-bg { background: url(‘../img/videoframe.jpg’) center center / cover no-repeat; }
          .fullscreen-bg__video { display: none; }
          }

          • foo

            thank you, Luka.~ It’s great!!!

  • Ricardo Castro

    I’ve used the code, or parts of it rather, of the project http://www.macmillannewventures.com/. The problem I’m getting is that my video seems to be off centered and the height/width of the video doubled, even when using the link of the macmillan bg mp4 video. So I believe it’s some problem with the code and not my video?

    • Luka Čavka

      Hi Ricardo! Sorry for the late reply. Things have been pretty hectic at the office. A lot of work to finish up before the end of the year 🙂

      This is the part of the CSS code that stretches the video and centres it:

      @media (min-aspect-ratio: 16/9) {

      .fullscreen-bg__video { height: 300%; top: -100%; }

      }

      @media (max-aspect-ratio: 16/9) {

      .fullscreen-bg__video { width: 300%; left: -100%; }

      }

      This is the only way you can make a fullscreen video background.

      You make the video bigger than the screen (this is why it seems zoomed in) and than pull it back by negative positioning to make it centered.

      You can try to reduce the width/height values to make it less “zoomed”.

      Hope this helps.

  • Gregg Pechenik

    Nice, code seems to work well and love what Ricardo did with it. What it doesn’t seem to do is play on iOS (only shows 1st frame). I recently meet a guy that has a site w/ video bg .. his site has the same issue, video won’t play. – Does anyone here know of a way to kick start the motion? — Thanks & MERRY X-MAS!!

    • Luka Čavka

      Hi Gregg,

      Happy New Year!

      In this example, the video is replaced with an image on smaller screens.
      That peace of code can be removed but the video still won’t autoplay cause Apple disabled the autoplay feature for IOS.

      From the Apple developer documentation:

      “Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

      In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it.”

      Link: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

      You can try to find a workaround for the issue, but I wouldn’t recommend it. Saving mobile data and page performance should be your top priority for mobile.

      • Gregg Pechenik

        Yep, apparently the only way to make the video play is via user command.. They’ve even disabled other ways . Best way seems to be with a lil js and a button onclick = play video .. Thanks!!!

  • John Pelasio

    Thanks for this man! Made it real simple to follow

  • Вера Мельник

    Hi Luka! Your code is very very good. But I have a problem with IE(all). Video doesn’t play. With what could be the problem? Thank you.

    • Вера Мельник

      Thanks 🙂 Just a little (but important) typo. The code is super.

  • Calvin Hodgson

    I was having problems in blogger but soon found out that Blogger’s XML requires
    =”true”
    to work.

    You’ll get this error if it isn’t there.

    Error parsing XML, line 1162, column 17: Attribute name “loop” associated with an element type “video” must be followed by the ‘ = ‘ character.

    Coded roughly as follows:

    Working successfully :). Now to code that into the main test.

  • Guest

    Is there a way to make it so the rest of the website start after/below the full screen video? Right now it lays all my text (my whole homepage) on top of the full screen video.

    • Chase Johnson

      You can put the content you want below in a div tag listed in position: absolute; and top: 100%; the only problem is the fixed positioning on .fullscreen-bg which you can change to absolute with little problem I imagine. If that doesn’t work perhaps make the div tag a background color and z-index higher than the video. Hope this helped!

  • sam

    hyy im new for Html and Css can any one say how to implement a full page background video ..

  • Hi – I love your code – this is great. One thing though, having created a video page similar to your background playlist demo, … it works great in all 3 browsers (Chrome, FF, IE11, Edge) on my HP and ASUS laptops and my Nextbook tablet but the backgrounds do not play in chrome, nor any other browser I’ve tested on my android phone. However, if I use an index.html created by something like camtasia (i.e., with a player in it) or if I go to the mp4, webm or ogv file directly in any browser on my phone, it works fine. Any suggestions appreciated. I’d really like this to work on my phone too since the page is otherwise responsive! Thanks!

    • Luka Čavka

      Hi Jesse

      Video background is hidden for mobile screens (smaller than 767px).
      Remove this block of CSS to make it visible:

      @media (max-width: 767px) {

      .fullscreen-bg {
      background: url(‘https://dev2.slicejack.com/fullscreen-video-demo/img/videoframe.jpg’) center center / cover no-repeat;
      }

      .fullscreen-bg__video {

      display: none;

      }

      }

  • Pingback: Research #4:Video Backgrounds – Web Media Production I()

  • YoungIT

    Hi Luka, I love your code, however i have an idea, what do you think about use javascript to set background video mobile ? sorry for my bad english…

    • Luka Čavka

      Hi YoungIT,

      I would avoid using video on mobile altogether, since they tend to be pretty large for mobile use.
      If the user isn’t connected to a wifi hotspot, with their mobile phone, you are wasting their mobile data plan.
      A simple background image should be enough on mobile.

  • Valerie

    Hi Luka, I was wondering if its also possible to use a live videostream as background movie. For instance when you open the site it asks you to allow the website to put on your webcam. And this stream will be shown as the background image/movie… Do you think this is possible?

  • Dawn

    This is so much simpler then some of the other things I’ve used. Thank you x3. I’ve even got it sitting quite nicely in a bootstrap 3 carousel and resizing to the viewport. /cheers

    • Beatmania NZ

      I’d love to see this site 🙂

      • Dawn

        Here’s a holding page using the technique, standard bootstrap 3 carousel, using videos & static images, the works. http://my500parts.com/

  • Zunair Mushtaq

    Great info!… nice job

  • Max Berger

    Is there a way for a picture to go under this and not ontop of it. So the background is fixed to that position and I can make a 1-page scrolling site?

  • Pingback: Video and Hiding in Mobile()

  • Hi there, I can see that this isn’t supported in iphone 6S. I thought HTML5 Video was?

    • Luka Čavka

      Hi Jim,

      In the above example, video is hidden for all screens smaller than 768px. That’s why you can’t see it on your iPhone.

      You are right about the support, iOS supports HTML5 video.

  • Francisca Civit

    Hi, is there any way I can add a button so that the user chooses weather to listen to de audio of the video?
    Thanks a lot!
    Fran

  • Pingback: stretch background image css html5 | Background images paper()

  • Pingback: background image html no repeat full screen | Background images paper()

  • Gábor Németh

    If the video lost or can’t loading you have a poster background what U can’t use as cover. if you set the background image always you can see it and when the video loading its overwrite the background.
    😉

    .fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    background: url(‘https://dev2.slicejack.com/fullscreen-video-demo/img/videoframe.jpg’) center center / cover no-repeat;
    }

  • Pingback: html video tag background image | Background images paper()

  • Pingback: Background Videos, More Background Videos - openbox9: strategy, branding, and design()

  • Robbie Jackson

    Thanks for awesome tips!
    Best wishes 4 u…

  • Danny Arias
    • Braed

      Perhaps because it’s using left: 0; which will force it to fill the whole screen? I’m not sure what you mean.

  • cbgb

    https://uploads.disquscdn.com/images/fc5b0dd11d358a366e14ed8209b32f5d091b1ff2d6e76c944b7876586ae1f916.png https://uploads.disquscdn.com/images/f049c3540688033619be2f1ec5b14b390b2155d0d644aa1eb91d057c845bd73a.png

    I’m having trouble getting the poster to come up on mobile. I entered the 767 px max width, and it works on my iPad fine, but on iphone a play head presents itself, and on my android phone the video just plays normally. What am I doing incorrectly? I feel like I’ve copied the tutorial verbatim.

  • Desde El Cuarto

    Thank you, it helped me a lot

  • Joshua Duncan

    You can also use BrowsePlay to host the embed for a autoplaying background video that is compatible with mobile phones.

    http://browseplay.com

  • Thanks alot, very good code

  • Lukáš Klimčák

    Hi Luka

    thank you very much for the nice code!

    I am just interested whether you do not know why I cannot scroll on the page down. It happens that when I resize the window the text trespass the window’s borders and I cannot scroll on the page to see it whole.

    Thank you very much for your answer!!

    Kind regards,

    Lukas