Full Screen Video Background with HTML and CSS

Posted on by justinstolpe



In this post we learn how to create a full screen video background using HTML and CSS. The video background is always 100 percent height and width of the browser. We then overlay some text on top of our video background, and place some content below our full scree video background which is viewable when the page is scrolled.

Step 1: Setup the HTML

The HTML is very simply. We create a container div which will hold our video, overlays, and image. The full screen video background will be displayed on desktop and the image will replace the video when viewing the site on a mobile device.

<div class="background-video-container">
    <video class="background-video-element" autoplay muted loop >
	<source src="assets/background_video.mp4" />
    </video>
    <img class="background-video-image" src="assets/background_video_image.png" />
    <div class="background-video-overlay"></div>
    <div class="background-video-text-overlay">
	Easy, Code Is
    </div>
</div>
<div class="content">
    CONTENT BELOW THE FULL SCREEN VIDEO BACKGROUND!
</div>

Step 2: Style it up with CSS!

Now that we have our HTML setup, all that is left to do is apply some styles to the classes we created for each of our HTML elements.

.background-video-container class

This is our container class around everything. It holds our video, video overlays, and image for mobile. Position absolute with top, left, right, bottom, of zero, will keep it in our browsers view. The overflow hidden will remove and scroll bars caused by the contents inside of the div. The media query makes sure that on mobile the position changes to relative. This allows the image to adjust to 100% width of the mobile device and allows the content under the image on mobile to always be right under the image.

.background-video-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-container {
        position: relative;
    }
}

.background-video-element class

This is the actual video element. The video will always take up the entire view port, 100 percent width and height. When the browser gets resized, the video will be centered in the browsers view port because we have the transforms set to -50%. After defining the class,  we need to also add the class to both the desktop and mobile media queries. On desktop we want to display the video, and on mobile we want to hide the video.

.background-video-element { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -webkit-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% )  translateY( -50% );
}

@media screen and ( min-width: 800px ) { /* desktop */
    .background-video-element {
       display: block;
    }
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-element {
        display: none;
    }
}

.background-video-image class

This is the class for our image. On desktop we want to hide the image, and on mobile we want to display the image. So, we add our class to both the desktop and mobile media queries.

@media screen and ( min-width: 800px ) { /* desktop */
    .background-video-image {
    	display: none;
    }
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-image {
    	display: block;
    	width: 100%;
    }
}

.background-video-overlay class

This class is our dark overlay. We give it a little opacity so we can see through the black background to the video playing. This allows the text we place on top of the video to be more readable and it looks much cleaner. We only display this on desktop because our image is already dark enough that any text overlay we place on the image for mobile will look good.

@media screen and ( min-width: 800px ) { /* desktop */
    .background-video-overlay {
        height: 100%;
	width: 100%;
	position: absolute;
	background: rgba( 1, 1, 1, 0.8 );
    }
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-overlay {
    	display: none;
    }
}

.background-video-text-overlay class

This is the text we are placing on top of our video on desktop and image on mobile. We setup the defaults for this div so that the text is always in the center of the browser with translate, top, left set to 50% along with text align of center. Color of the text is set to white, #FFF, and font is nice and big at 90px. Only thing we are changing for mobile view is the font size, we are bring that down to 30px for mobile devices.

.background-video-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    color: #fff;
    font-size: 90px;
    text-align: center;
}

@media screen and ( max-width: 800px ) { /* mobile */
    .background-video-text-overlay {
	font-size: 30px;
    }
}

.content class

The content class is everything under the full screen video background. We define the class first and give it some margin and make sure the text is centered. The key style here is the styles in the desktop media query. Since our video is always 100 percent of the height of our browser window, we need to give our content a margin top of 100 percent of the browser window. In the media query, the “margin: 100vh 0 0 0;” sets the margin top to 100 percent of the browsers view port height (100vh). Now our content div always starts right below the height of the browser because it has a margin top of 100 percent of the browsers view port height.

.content-inner {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    display: inline-block;
}

@media screen and ( min-width: 800px ) { /* desktop */
    .content {
        margin: 100vh 0 0 0;
	width: 100%;
    }
}

That is how we create a full screen video background using HTML and CSS. Well, that is going to do it for this post, leave a comment, let me know what you want to learn and see implemented next.

Links

easycodeis.com

YouTube Video

Code on GitHub

The full code example can be found in the GitHub link above along with a live demo! The video tutorial for this can also be found in the YouTube link above. That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!

 

77 comments

  2. What’s up tto eery one, thhe contnts pressent att this wesite are really remarkable for people
    experience, well, keep uup the nice work fellows.

  3. Having rerad this I believed it wass very informative.
    I appreciate yoou takong the time aand effort tto put ths informative article
    together. I oonce again finhd mysself spending wayy too much tikme both reading
    annd lleaving comments. Butt soo what, itt was still worth it!

  5. Aw, this was an incredibly nice post. Taking the time and actual effort to make a good article… but what can I say… I put things off a whole lot and don’t manage to get nearly anything done.

  6. ต้องยอมรับว่าคาสิโนออนไลน์ เป็นช่องทางการเดิมพันที่ทั้งสะดวกและปลอดภัย เว็บการพนันออนไลน์อันดับ 1 ที่ได้รับการยอมรับมากมายจากสาวกพนันออนไลน์ว่าจ่ายจริงจ่ายเต็ม ทำเงินได้จริง ที่สุดของเว็บคาสิโนออนไลน์ต้อง แทงบอลออนไลน์

  15. The otrher day, while I wass at work, my sister stole
    mmy apple ipad annd tested to seee iff iit ccan survive a forty foot
    drop, just so shhe can bee a youtube sensation.
    My iPadd is now bdoken and shhe has 83 views.

    I know this is completely off topic buut I hadd tto share itt wuth someone!

  18. I want to to thank you for this fantastic read!! I absolutely loved every bit of it. I’ve got you saved as a favorite to check out new things you postÖ

  19. I am not sure the place you’re getting your information, however good topic. I must spend a while learning much more or understanding more. Thank you for excellent info I was looking for this info for my mission.

  20. Thanks for the auspicious writeup. It actually used to be a amusement account it. Look complex to more delivered agreeable from you! By the way, how can we communicate?

  23. Tremendous issues here. I am very satisfied to see your article.Thank you so much and I’m looking ahead to touch you.Will you kindly drop me a e-mail?

  32. Hi just wanted tto giv you a brieef heazds
    upp and let you know a feww of the iages aren’t loadinng properly.
    I’m not sure why but I think itss a linkijng issue. I’ve ttried iit in twwo difderent internet browesers and bkth show
    thee sme results.

  35. It iis perfect time to make a few pplans forr the futuree annd it’s tiime tto be happy.
    I’ve learn this submit andd if I mmay jyst I wish
    to sugges youu somee attention-grabbing isssues oor
    advice. Maye you could writye next articles relating too thus
    article. I desire to larn more thinhs aplroximately it!

  36. It’s actually a nice and useful piece of information. I’m satisfied that you simply shared this helpful information with us.Please keep us up to date like this. Thank you for sharing.

  37. Thank you for another magnificent article. The place else may just anybody get that kind of information in such an ideal way of writing? I’ve a presentation next week, and I’m at the search for such information.

  39. Wow! This could be one particular of the most helpful blogs We have ever arrive across on this subject. Basically Fantastic. I’m also an expert in this topic therefore I can understand your hard work.

  41. Very good written story. It will be valuable to everyone who usess it, as well as yours truly :). Keep doing what you are doing – looking forward to more posts.

  42. I am not sure where you are getting your information,but good topic. I needs to spend some time learning much moreor understanding more. Thanks for magnificent info I was lookingfor this info for my mission.

  45. Heya i’m for the first time here. I came across this boardand I find It truly useful & it helped me out a lot.I hope to give something back and aid others like you helped me.

  50. When someone writes an piece of writing he/she keeps the thought of a user in his/her brain that how a user can knowit. Thus that’s why this article is amazing. Thanks!

  52. It’s actually a great and useful piece of information. I am glad that you just shared this useful information with us. Please keep us up to date like this. Thank you for sharing.

  54. whoah this weblog is fantastic i love studying your posts. Stay up the great work! You already know, lots of persons are hunting around for this information, you could help them greatly.

  55. This design is steller! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

  56. magnificent post, very informative. I wonder why the other specialists of this sector don’t notice this. You must continue your writing. I’m sure, you have a great readers’ base already!

  57. What i don’t understood is actually how you are now not actually a lot more well-preferred than you may be now. You’re very intelligent. You understand therefore significantly when it comes to this matter, produced me in my opinion imagine it from so many various angles. Its like women and men don’t seem to be fascinated unless it is one thing to do with Lady gaga! Your personal stuffs excellent. At all times care for it up!

  58. What’s Happening i’m new to this, I stumbled upon this I have discovered It absolutely useful and it has aided me out loads. I am hoping to contribute & assist other users like its aided me. Good job.

  60. Greetings! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot!

  61. It is perfect time to make some plans for the future and it’s time to be happy. I have read this post and if I could I wish to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I desire to read even more things about it!

  62. Hiya, I’m really glad I have found this information. Nowadays bloggers publish only about gossips and net and this is actually irritating. A good site with exciting content, that’s what I need. Thank you for keeping this web-site, I’ll be visiting it. Do you do newsletters? Can’t find it.

  64. Hello There. I found your blog the use of msn. This is a very well written article. I will make sure to bookmark it and come back to learn more of your useful information. Thank you for the post. I’ll certainly comeback.

  65. Hello there, just became alert to your blog through Google, and found that it’s really informative. I am going to watch out for brussels. I will appreciate if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  66. I do consider all the concepts you have presented for your post. They’re very convincing and will definitely work. Still, the posts are too brief for starters. May just you please prolong them a bit from next time? Thanks for the post.

Leave a Reply

Your email address will not be published. Required fields are marked *