How to create a background video | HTML & CSS tutorial

If this doesn't work on iOS, try adding the 'playsinline' attribute.

While background-images are really easy, there is no simple way to do a background video. In this video I explore how to set up a background video with HTML and CSS, including a few different tricks on positioning it.

One thing to note is, while these are really trendy, be careful with them. They aren't exactly considered best practice. Auto-playing videos are generally seen as something to be avoided, and it can add a ton of weight to your site. But that said, it is good to know how to do it :)

#html #css #backgroundvideo

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[michaelmichaelov]

As always a genius, I'm glad you spoke so fast, I've watched videos of people who have been grunting for two hours and finally nothing. Thanks for the valuable lesson !!!

[PhilDiasPJD]

Hi Kevin. For me it's not that you just create amazing things for everyone else to get their teeth stuck into, it's the fact that you explain it all so AMAZINGLY WELL. I always learn something from your videos. Keep it going. 👍👍👍And thank you.

[aimanbasit]

i watch 10+ videos but couldn't find the solution and this video solve all the problems with complete explanation

[kerryd]

Thank you Kevin, for being so generous with your time. Your videos are always great. (-:

[krisvanheijningen]

I would love to see an indepth video about video backgrounds!!

[chp]

This is video was exactly what I was looking for! I needed a hero video blended into the next section below, and the gradient was the perfect solution for that

[Shakas]

Thank you for this one Kevin! I was really struggling with the responsiveness trying to do this to the point where I was using like 4 or 5 media queries. This video was exactly what I was looking for!

[stevietoes]

You sir are a wizard. Thank you for your clear tutorials!

[markslima]

such an awesome video on this procedure, i finally know how to get always-centered background video with optional gradient overlay. thank you kevin!

[TheElkster]

Great video!!! I have now got loads of new ideas of where to use this! :) Thanks, Kevin!

[DANLIAOFreeToLearnChinese]

Thank you much. I just started to learn Visual Studio Code without any computing language background. I have learned so much from your tutorials . For instance, how to add image, click button and videos to my website ~~~

[HowAnimalsWork]

Thanks man, these relaxing easy css and html videos are keeping me motivated. Its a good break from learning JS... im kinda struggling there :)

[leontikvesa]

Thank you Kevin for being so generous to openly share your amazing skills! Could you please show us an indepth video about video backgrounds? Thanks

[chanm]

I've been seeing this effect (or similar effects) more and more these days. Probably because it's being baked into those website CMS services as a template?


Well thanks to this video, now I know how to do it too! (And it was surprisingly straightforward!)

[khlgaming]

Good Job Kevin, you're always saving me <3

[mdstevens]

Very helpful tutorial actually, I tried doing this with a "shadow-div" that would draw a transparent black box over the video, but just using the video's container with a "z-index:-1" is so much better.

[cervece]

Thanks a lot Kevin, not all heroes wear capes...

[sutaschramm]

Wow, super helpful video. I spend a lot of time messing with settings, and it's still not even right (obviously now). Thank you for showing us how it's really supposed to be done.

[aiilascosse]

man, i loved this video, you are the best! Thanks for this class!

[evaavatar]

one million thanks. you saved my life !!!