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

---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: discord.gg/nTYCvrK

I have a newsletter! www.kevinpowell.co/newsletter

I've been working on some courses! Find out more: www.kevinpowell.co/courses

---

My Code Editor: VS Code - code.visualstudio.com/

How my browser refreshes when I save:    • How to automatically refresh your browser ...  

---

Support me on Patreon: www.patreon.com/kevinpowell

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.

Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell