Responsive CSS3 / HTML5 Video Background In div No Javascript Needed!

Responsive CSS3 / HTML5 Video Background In div No Javascript Needed!">

Responsive CSS3 / HTML5 Video Background In div No Javascript Needed!

Updated on Aug. 4th, 2013

HTML5 Video

Ugh! So this took me the better part of a day, on a holiday weekend when I shouldn’t be working. Either way I want to get this out there ASAP. I needed a HTML5 video background to appear inside a:

on my web page. Did I mention that the page was responsive (Bootstrap) and the video needed to scale to width without destroying the aspect ratio, oh and that the containing div has a FIXED HEIGHT!!! Yeah, fun stuff considering I had never attempted this before. So, with some HTML5 and CSS3 trickery… I was able to accomplish this without having to use JavaScript at all! I mean, isn’t that the point of HTML5?

I am going to cover more than just how to apply some code to your page in this tutorial. I wasn’t sure where to start when it came to HTML5 video tags, so I want to share with you the entire process of taking a video from your computer and making it a useful website div element. Let’s get started.

FIRST AND FOREMOST:

I found this awesome little piece of open source goodness called “Miro Video Converter”. This software allows you to convert your video files to the filetypes needed to execute the video on your website. Which I haven’t even got to yet, but I suggest taking a second right now to download this. Visit their website here.

Being that I got ahead of myself a little bit there, let’s get back on track. When planning on adding a video to your website as a background you must first have a video. This video should be at least 720P resolution and shouldn’t exceed 30 seconds in length as we’re going to just loop the video for the effect. So, you need to produce your own video for this to work. And you might actually have to “produce your video” in the sense that you may want to edit or trim it to a specific length. In my case, I used iMovie (for Apple) to strip the video of any volume because I find that annoying on websites (when video’s autoplay on a website and there is volume added). That being said, put some thought into the video you want to use and try to keep in mind that the actual video on the web page will only show a narrow window of the total video size. This is not a page background video tutorial, this one is for div background video.

Assuming you found your video, you’re going to need to convert it to THREE different filetypes:

  • .mp4
  • .ogv
  • .webm

…two of which I am extremely unfamiliar with (webm/ogv) but that fancy Miro Video Converter handled converting my .MOV file to the above mentioned filetypes. If the video file you’re working with is currently .mp4, I would suggest running it through the Miro program anyway.

NEXT STEP:

Let’s go ahead and upload the THREE video filetypes to your server at a destination of your choice. For my example, I will be using the /img folder for storing my video files. You can name your folder anything you want, just remember the name for later implementation.

CSS3 and HTML5 VideoNOW… we need to do some HTML coding and CSS styling to make this happen. The following examples are based on the header of this page. I have a full width header that scales down with the page width but maintains a fixed height. If you want your div to re-size with the page, this tutorial will not work for you. Although, I think you will learn enough about what’s going on to figure it out on your own after getting this working.

LETS ADD THE CSS:

Open up your CSS file and add the following code at the bottom:

The KEY to keeping the video contained within my “.header-unit” div is the “overflow: hidden;” attribute of the “#video-container” div id. Try removing that attribute and see what happens to the size of your video… It goes over the borders of the containing div. Some other important attributes of the above CSS are the “absolute” positioning used on the “#video-container” ID and “video” element. These ensure that the video placement has an “absolute” value (something that responsive web designers HATE!) which does not change. Also, the “z-index” attribute of the video element may have to be adjusted according to your containing div’s current attributes (IE: a background image or logo you would want to place above the video). Be extremely careful using the “z-index” because it can drastically affect your entire site by layering divs incorrectly. If all else fails, set the “z-index” back to “0” and your page should return to normal.

PLEASE NOTE:

the class “.header-unit” is only there for the purpose of showing you the div class in which I wish to contain the video. It will show up again when we get down to the HTML part. Anyhow, you could be applying this to a completely different div element with different variables but the main point of attention regarding the “.header-unit” is the fact that it’s 150px high… fixed height.

THE HTML:

The following HTML will need to be customized to fit your filenames and path’s. But, it’s really pretty simple.

HTML5 and CSS3 VideoThe HTML5 aspect of the above code is the “video” tag. If you notice, within the opening video tag, I have added “autoplay” and “loop” before the class declaration. These are native HTML5 video commands. Autoplay will start the video automatically, without the need for a play button. Loop will keep the video on an infinite loop while the website is loaded. There are more options that you can find by searching for “HTML5 video options”.

CONCLUSION:

That’s really about all there is to make this work. Although if you’re going to just copy and paste my code, I would suggest trying this on a test page rather than your current live website. Remember, its full width in this example and that may not be what you want.

THE UNFORTUNATE REALITY:

These cool little video’s struggle on mobile devices as of yet. Sometimes they work, sometimes they don’t, sometimes it wants to play in a stand-alone video player app. I am constantly experimenting to find a happy medium between desktop and mobile for these videos but have yet to lay down anything 100% solid. Any help would be appreciated on this.

WORKAROUND FOR FIREFOX!
8-04-2013: I figured out how to get this to work in Firefox!!! Thanks to Stackoverflow! The solution is pretty simple.

Step 1: Create an “.htaccess” file in the FOLDER that contains the video files.

Step 2: Add the following commands to it:

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

AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/mp4 .m4a
AddType audio/wav .wav

Step 3: Save the .htaccess file to your server and voila! The video now works in MOZILLA FIREFOX!!! *this is assuming that you are using an Apache server.

As the compatibility grows, I will make sure it works here so check back. LIVE DEMO BELOW!!! 🙂

As always, thanks for visiting my website and I look forward to your comments.
Video below:

 

 

 

Your email address will not be published.1

This article currently has 74 comments.

Jason A.

THANK YOU! You made this real easy to understand even for a noob like myself.

mireille

sadly does not work for firefox – but thanks for the share

Rune G

Thanks, I will use this as my way in to the world of !

Is there also a simple way to integrate a backup image here, or do you replace the entire video-container?

    BEN
    Post author

    Rune, thanks for the comment! Yes there is a way to implement a still image incase the video wont play.
    Look up “html5 video type poster”…

    The HTML5 class “poster” should work for you. I have it in place for this website but haven’t had a chance to tweak the results. I would imagine you can style “poster” any way you want in your CSS. Just omit the class “fillWidth” as it may not pertain to your development.

    Or, you could just use the still image as the background of the containing element… either way should work.

Eric H.

Great tutorial!

One question – how do you set it up to remove it at the mobile level and revert to a poster image?

    BEN
    Post author

    Good question Eric. I am using the bootstrap class “.visible-desktop” to make it only appear on desktop viewports, but if you’re not using bootstrap, this will not work for you.

    You could wrap the video container with a div, one that’s sole purpose would be to hide at mobile level. I usually name these div’s “mobile-kill” or something along those lines.

    I would use the CSS3 media queries to only enable the “kill” class at the mobile level.

    But, if you can, use bootstrap… it will make it much easier. Let me know if have any more questions and thanks for the reply.

Vish

Can you use a youtube video to host the video?

    BEN
    Post author

    Wouldn’t that kind of defeat the purpose of using HTML5 video?

    Anyhow, I doubt it would work with YouTube to more directly answer your question. But it DOES work with Vimeo. I just think that using 3rd party for video hosting defeats the purpose of HTML5 and the freedom of hosting your own videos. Just my 2 cents.

 Pingback:

15 Web Design Trend Showcase: Big Video Headers | Templates Perfect

chip

How do i get the black lines on the side to go away like strech

French

Thank you Ben!

That’s exactly what I was looking for. Works perfectly!

Bobo

Hello,

It doesn’t work on my smartphone. Is there a solution to launch the video ?

Thank you

 Pingback:

Sexy Web Design Trends of 2013 (and how to get your hands on them) | sarahjustine.com

Andrey

Hello! Is there easy way to play/pouse background video?

Alex A

Is there a way to put text on top of the video if I were to make this a header? Or better yet a logo?

    Ben Kaminski
    Post author

    Alex A,
    Yes, there is absolutely a way to put any text or image on top of the video. Although that is another article in and of itself, you would have to create an container for your text and use CSS to place it where you would like on top of the video. If your text goes underneath the video, use the “z-index” CSS rule and pull that container to the top!

Vincent

Thanks for sharing Ben! Awesome stuff!

Filipe SIlva

Great article! Very helpfull. thank you so much

Evangelista Grace

Hey there! thanks for the tuto…but idk where i can upload video file types.. 🙁

Jan

Hi Ben, thanks for the tutorial. What mobile platform does your solution support? It doesn’t seem to be working on Kindle Fire (Android). All I get is a black rectangle.

    Ben Kaminski
    Post author

    @Jan, thanks for the comment! As I stated in the tut:

    These cool little video’s struggle on mobile devices as of yet. Sometimes they work, sometimes they don’t, sometimes it wants to play in a stand-alone video player app.

    HTML5 Video just isn’t as widely accepted as it should be at this point. There are regular browsers for desktops that still don’t support HTML5 video so the fact that it’s not working on your Kindle Fire does not surprise me at all. It doesn’t work on my iPad or iPhone either.

    I don’t think mobile devices like the “autoplay” command in HTML5.

    I could make my video work on your device and mine as well, but I would have to add a way to start the video (like a play button), but that was not the original intent of the tutorial. It was to have the video itself be responsive, with no controls, and continuous loop.

    If you want this to work on your kindle and other devices, I would try using the tutorial here:

    But you’ll have to add some buttons to make the video start and stop.

Moe

Thank you and the source for the firefox workaround

Danny Chan

I noticed that you required an .ogv file format for the video, but the implementation on the code says .ogg. Was this an error?

Diego Rosa

Awesome stuff! Great article!

Sunny

Thank you so much for this tutorial, really helped a lot.

Regarding the problem of mobile, I believe it’s because some phone companies like Apple don’t allow autoplay on video elements to save bandwidth for the users. You can try using a the poster attribute for the video which will show that image instead of the video in mobiles phones that don’t allow autoplay.

Also you should use the muted option for the video to mute it, then you won’t have remove the audio yourself.

Thanks again.

Sagan Marketing

Thanks for this useful guide, much appreciated!

damian trejo

Thanks, excelent tutorial 🙂

munkhbayar

Thank you very much 🙂

jsil

Hi Ben

Just stumbled across this tutorial and it’s really helped me solve a problem I was having (I’m an amateur coder) so thanks for taking the time to put this together!

The finish I’m looking for is similar to the Spotify website (https://www.spotify.com/uk/video-splash/), but I want to take it a step further and be able to scroll down to reveal more content while the video remained fixed (and responsive), so being able to contain it within a div was a strong requirement.

I would like to overlay text over the video similar to spotify – any ideas how i can achieve this?

I adapted your HTML code a little which saves the trouble of having to strip the audio out

Thanks again,
Josh

DK

Thanks for this! Sure beats relying on a Javascript solution for everything.

sara

Not function en safari.
thinks.

Samuel Miller

Thanks!

MrLog

very nice, i suggest it using with filter, for example(filter: blur(3px) brightness(0.5);), and add text on the video. The effect is great.

preston

Hello, Am trying to put some text on top of the video. Is it possible?

chris

Help
This works great on my local but doesn’t work on the on any browsers only get a black video box….what do I do?
Thanks

    Ben Kaminski
    Post author

    Hey Chris,
    Check the paths to the video files and make sure they’re correct. You may also want to check the permissions of the videos you uploaded. They might not have the correct settings.

RA

Gosh Thanks! this really helped me out! =)

Fransiscus M. Pasaribu

Thx sir, solved my problem.. 😉

Brian

I have been trying to figure this out for 3 hours. I finally stumbled on this! THANK YOU!

ullas

please help me, i want to mute sound .what do i do ?

Julia

Thank you! You saved me!!

Bob Arpanet

Nice wrok.
And,
there is a reason video doesnt autoplay on mobile devices. Dont tell me you dont know how much mobile data prices are to be chewed up by hight bandwidth videos firing unnoticed.

    rohnn

    Most mobile platform will not auto-play any HTML5 vid… Exactly because of your fears, Data Usage ! 🙂
    Can be very expensive in data (for now at least) and therefore, turned off.

    The issue then it the appearance of controls… that can overlay your content and thus interfere with your site.
    Better then use a plain image. 🙂

Fan

Thank you for showing this, this helped me greatly!

Christian Mackin

I don’t see how your video is embedded. When I click, it takes me to another video window on iPhone. Please see my website ********.com. I’m trying to have the video play in the back ground without showing controls and without jumping to another screen on iOS. Do you have advice? I understand it won’t auto play, I just want the video to play embedded and not jump out of the website to play.

    Ben Kaminski
    Post author

    Christian, as others have stated in this thread, IOS will not play HTML 5 video’s within the web page due solely to forcing data on the end user and how it can affect your bill with your mobile carrier.

    The only website I have found that will actually play HTML5 videos on mobile devices is called “Video For Everyone“, but this is due to a built in FLASH Player fallback.

    So, bottom line, your video won’t autoplay on IOS or android without a flash fallback due to data affecting the cost of your mobile device’s monthly bill.

Dean

Hello,

I have tried your Code but the content that I want to display on to of the Video Background is not displaying! You can see the sample page I have created for this here:

*** I removed the link -BK ***

So as you see the DIVs that are supposed to be on top of the Video DIV are not displaying!
That is these DIVs:
Some Content on the video frame.
More Content on the video frame.

What am I doing wrong?
How does one get DIV display on top of this Video DIV?

Thanks,
Dean

    Ben Kaminski
    Post author

    Dean, I don’t have much time at the moment but wanted to get back to you. I have a hunch that your issue revolves around the “z-index” of the involved div’s.

    Whatever you want to display on top should have a higher “z-index” than what is below it. It might also require a “position: absolute;” on one of the divs.

    Try messing with the z-index values and let me know if that helps.

    Thanks Dean!

 Pingback:

Responsive CSS3 / HTML5 Video Background In div No Javascript Needed! | Tony BRAMNIK

William Michael

Helped me out of a jam here…works perfectly. Thanks!

Ivan

I managed to achieve this (with the exception of older Safari versions) with the following code:

Apparently older versions of Safari don’t support the “margin-left: calc” property.

    Ben Kaminski
    Post author

    Hey Ivan… thanks for commenting. Your code snippet did not come through though. If you would like to post code in the comments I recommend using GitHub Gist.

Navdeep Singh

Thankyou so much.. I tried finding this method since long time but today i found the method..
another question… how to create a full screen background responsive VIDEO…??

    Ben Kaminski
    Post author

    Navdeep,
    That may actually be easier. Without researching it at all, just like in this tutorial we appended the video to a div, you would use a similar technique and apply it to the body element rather than an individual section of the page.

    I’ve seen tons of great tutorials out there on full page video backgrounds, spend some time on Google and you’ll see something you like.

Raghavendra.Padasalgi

Mr.Ben Kaminski
Sir I liked your article very useful.I regret to advise that this is not working with me despite following all your instructions.Please guide me.
Thanks.(mycode)


.header-unit {
height: 150px;
border: 2px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}

Your browser does not support the video tag. I suggest you upgrade your browser.



Alan Catron

I savour, lead to I discovered just what I was taking a look for. You’ve ended my four day lengthy hunt! God Bless you man. Have a nice day. Bye

Mark Exell

Brilliant!

Its so refreshing to see someone explaining things in an easy to understand way.

Many thanks for your help.

All the best to you

Mark

Joshua Duncan

Has anyone here tried using BrowsePlay to host their background video? how did it go?

jakir hossain

how to responsive it,

    Ben Kaminski
    Post author

    The responsiveness comes from the following CSS:

    #video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
    }
    video {
    position:absolute;
    z-index:0;
    }
    video.fillWidth {
    width: 100%;
    }

    If this isn’t working for you, it could be conflicting CSS rules.

Jesse

Very nice! Thanks!

Joshua Duncan

would be cool to get your opinion on https://browseplay.com