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: https://discord.gg/nTYCvrK
I have a newsletter! https://www.kevinpowell.co/newsletter
I’ve been working on some courses! Find out more: https://www.kevinpowell.co/courses
—
My Code Editor: VS Code – https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
—
Support me on Patreon: https://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: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
@Kevin – now that you're more invested in accessibility, it would be interesting to see a series where you go back to some of these projects and update them with accessible thinking. An example here being that your video should be pausable or stoppable. Just a thought for new content.
bro this is so good man
The another easy way to put the video in center is to add (object-fit: cover;)
Wow, how easy is that? Thank you so much.
Exactly what I needed. Thank You!!!!!