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!

 

393 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.

  90. Heya are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog? Any help would be really appreciated!

  96. Wow that was strange. I just wrote an incrediblylpng comment buut after I clicked submit my commentdidn’t appear. Grrrr… well I’m not writinng all thatover again. Anyways, just wanted tto say superb blog!

  98. An intriguing discussion is definitely worth comment. I do think that you ought to publish more about this topic, it may not be a taboo subject but typically people do not discuss these subjects. To the next! All the best!!

  107. Thanks for finally talking about > Slightly Stoopid,Tribal Seeds, Matisyahu and Hirie at Red Hat Amphitheater in Raleigh,NC: Part 1 – INDRA Magazine

  108. Hi my friend! I wish to say that this post is awesome, great written and include approximately all vital infos. I’d like to look more posts like this .

  127. What’s Taking place i’m new to this, I stumbled upon this I have discovered It positivelyhelpful and it has aided me out loads. I’m hoping tocontribute & help different users like its aided me.Good job.

  129. Hello there, just became alert to your blog through Google, andfound that it is truly informative. I’m gonna watch out for brussels.I’ll appreciate if you continue this in future. Many people will be benefited from your writing.Cheers!

  139. Great post. I was checking continuously this blog and I’m impressed!Extremely useful information specifically the final part 🙂 I care for such info a lot.I used to be looking for this certain info for a very lengthytime. Thanks and good luck.

  157. Heya i am for the primary time here. I came across this board and Ito find It truly useful & it helped me out a lot.I am hoping to give something back and help others such as you aided me.

  172. Hey! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job!

  181. Hi my friend! I want to say that this article is amazing, nice written and include almost all significant infos. I would like to look more posts like this .

  183. I don’t even know the way I stopped up here, however I believed this submit was once great. I do not recognize who you are but definitely you are going to a famous blogger in the event you aren’t already 😉 Cheers!

  195. It’s in fact very complex in this full of activity life to listen news on Television, so I only use internetfor that purpose, and obtain the most recent news.

  199. Aw, this was a very nice post. Finding the time and actual effort to produce a really good articleÖ but what can I sayÖ I procrastinate a lot and never manage to get nearly anything done.

  204. I blog often and I genuinely thank you for your information. This great article has really peaked my interest. I am going to bookmark your blog and keep checking for new information about once per week. I opted in for your Feed too.

  214. Very nice post. I simply stumbled upon your blog and wished to mention that I’ve trulyenjoyed surfing around your blog posts. Afterall I’ll be subscribing to your feed and I’m hoping you write again verysoon!

  225. I would like to thank you for the efforts you have put in penning this blog. I am hoping to view the same high-grade blog posts by you later on as well. In fact, your creative writing abilities has inspired me to get my very own blog now 😉

  227. Enjoyed examining this, very good stuff, appreciate it. “Nothing happens to any thing which that thing is not made by nature to bear.” by Marcus Aurelius Antoninus.

  233. That is a great tip particularly to those fresh to the blogosphere. Short but very precise informationÖ Appreciate your sharing this one. A must read post!

  236. Dex…we were doing so good. I promised to not politics at your funeral…you opened up about the Mandalorian…Then you go and post this white hot garbage opinion. Whyyou gotta be this way WHY DO YOU PUSH ME AWAY LIKE THIS!

  253. hi!,I really like your writing so a lot! proportion wekeep up a correspondence extra approximately your article on AOL?I need an expert on this house to unravel my problem.Maybe that is you! Looking forward to peer you.

  257. Hi my family member! I want to say that this post is awesome, great written and include almost all significant infos. I’d like to see extra posts like this .

  261. Heya i am for the primary time here. I came across this boardand I in finding It truly helpful & it helped me out a lot.I’m hoping to provide one thing back and aid others such as you helped me.

  262. Thank you for sharing your info. I truly appreciate your efforts and I am waiting foryour next write ups thank you once again.

  264. Whats Taking place i’m new to this, I stumbled upon this I have discovered It positively useful and it has helped me out loads. I hope to contribute & assist different users like its aided me. Great job.

  265. Hmm is anyone else experiencing problems with the pictures on thisblog loading? I’m trying to find out if its a problem on my end or if it’s the blog.Any responses would be greatly appreciated.

  266. I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes itmuch more pleasant for me to come here and visit more often. Did you hire out a designer tocreate your theme? Excellent work!

  267. You want to show your coach that you have the right attitude in order to help defend and help your team score without giving up.

  269. Greetings! Very helpful advice within this article! It’s the little changes that produce the largest changes. Thanks for sharing!

  276. Hi there! This post couldn’t be written any better!Reading this post reminds me of my old room mate! He always kept talking about this.I will forward this article to him. Fairly certain he willhave a good read. Thank you for sharing!

  279. Hi! I just wanted to ask if you ever have any problemswith hackers? My last blog (wordpress) was hacked and I ended up losing months of hardwork due to no back up. Do you have any methodsto stop hackers?

  281. Hi there, this weekend is good in support of me, because this point in time i am reading this fantastic informative article hereat my residence.

  282. Very nice post. I just stumbled upon your blog and wanted to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your feed and I hope you write again very soon!

  286. Thanks , I’ve just been looking for information about this topic for a long time and yours is the best I’ve came upon so far. But, what concerning the bottom line? Are you sure about the supply?

  288. Heya i’m for the first time here. I came across this board andI find It truly useful & it helped me out much.I hope to give something back and help others like you helped me.Feel free to surf to my blog post – hemp farming

  293. When someone writes an article he/she maintainsthe idea of a user in his/her mind that how a user can be awareof it. Therefore that’s why this paragraph is great.Thanks!

  296. It’s an awesome article designed for all the internet people; they will get benefit from it I am sure.

  298. I do not even know how I ended up here, but I thought this postwas great. I don’t know who you are but certainly you are going to a famousblogger if you aren’t already 😉 Cheers!

  301. Xoilac Tv Trực Tiếp Soccer kèo nhà cái chấm comĐội tuyển Việt Nam chỉ cần thiết một kết quả hòa có bàn thắng nhằm lần thứ hai góp mặt trên World Cup futsal. Nhưng, để thực hiện được điều đó

  302. You can find visibly a pack to learn about this particular. I actually suppose you made certain good factors in functions also.

  303. I do agree with all the ideas you have presented in your post. They’re very convincing and will definitely work. Still, the posts are too short for starters. Could you please extend them a bit from next time? Thanks for the post.

  305. Enjoyed looking through this, very good stuff, thanks. «Whenever you want to marry someone, go have lunch with his ex-wife.» by Francis William Bourdillon.

  308. Via my investigation, shopping for electronic products online may be easily expensive, but there are some tips that you can use to obtain the best things. There are always ways to discover discount offers that could help to make one to come across the best electronic products products at the lowest prices. Good blog post.

  309. I am curious to find out what blog system you have been utilizing? I’m experiencing some small security problems with my latest blog and I would like to find something more risk-free. Do you have any solutions?

  310. Very well written post. It will be helpful to anybody who utilizes it, including yours truly :). Keep up the good work – for sure i will check out more posts.

  316. Thanks for your useful post. Through the years, I have come to be able to understand that the symptoms of mesothelioma are caused by your build up connected fluid between the lining of the lung and the chest muscles cavity. The condition may start from the chest spot and spread to other limbs. Other symptoms of pleural mesothelioma cancer include fat loss, severe respiration trouble, a fever, difficulty swallowing, and infection of the neck and face areas. It ought to be noted that some people living with the disease will not experience almost any serious indications at all.

  317. Thanks for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently writhing on, and I have been on the look out for such great information. 먹튀검증사이트

  319. Thanks for another informative blog. The place else may Iam getting that type of information written in such a perfect manner?I have a venture that I’m just now working on, and I’ve been at the glance out for such info.

  336. Good day! I simply wish to give an enormous thumbs up for the nice info you’ve gotten here on this post. I might be coming back to your blog for extra soon.

  337. Thanks for some other informative blog. Where else may just I get that type of information written in such an ideal means? I have a challenge that I’m simply now running on, and I have been at the look out for such info.

  342. certainly like your web site but you need to check the spelling on several of your posts. Several of them are rife with spelling issues and I find it very troublesome to tell the truth nevertheless I will definitely come back again.

  348. Awesome blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Thank you

  351. Thanks for your intriguing article. Other thing is that mesothelioma is generally attributable to the breathing of fibers from asbestos fiber, which is a very toxic material. It truly is commonly viewed among laborers in the structure industry who may have long exposure to asbestos. It is also caused by moving into asbestos covered buildings for a long period of time, Genes plays a huge role, and some individuals are more vulnerable towards the risk as compared with others.

  360. hey there and thank you for your information ?I抳e certainly picked up something new from right here. I did however expertise several technical points using this site, as I experienced to reload the web site lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and can damage your high quality score if advertising and marketing with Adwords. Anyway I抦 adding this RSS to my e-mail and can look out for much more of your respective intriguing content. Make sure you update this again soon..

  365. Asking questions are actually nice thing if you are not understanding something fully, except this paragraph provides fastidious understanding yet.

  366. I’m extremely impressed with your writing skills as wellas with the layout on your blog. Is this a paid theme or did you customize it yourself?Anyway keep up the excellent quality writing, it is rare to see a great blog like thisone these days.

  367. 994824 627170Some genuinely interesting information, well written and broadly user pleasant. 53677

  368. Aw, this was an incredibly good post. Taking the time and actual effort to make a good articleÖ but what can I sayÖ I hesitate a whole lot and don’t seem to get anything done.

  369. Heya are using WordPress for your blog platform? I’m new tothe blog world but I’m trying to get started and create myown. Do you require any html coding knowledge to make your own blog?Any help would be really appreciated!

  370. The values of the cards in every single hand are added and compared in order to obtain a winner.

  371. Your style is unique in comparison to other folks I’ve read stuff from. Thank you for posting when you’ve got the opportunity, Guess I will just book mark this blog.

  374. Hi! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back often!

Leave a Reply

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