How to create a background video | HTML & CSS tutorial
HTML-код
- Опубликовано: 17 сен 2019
- 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
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 r...
---
Support me on Patreon: / 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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
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 !!!
I would love to see an indepth video about video backgrounds!!
me too
Check this out to see how it works: paul.gd/experiments/hero-video-header/
Thank you Kevin, for being so generous with your time. Your videos are always great. (-:
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!
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.
Thanks for the kind words Phil, glad that you like my teaching style!
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
Great video!!! I have now got loads of new ideas of where to use this! :) Thanks, Kevin!
such an awesome video on this procedure, i finally know how to get always-centered background video with optional gradient overlay. thank you kevin!
You sir are a wizard. Thank you for your clear tutorials!
Straight to the point. Thank you. Subscribed.
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
Thank you for your tutorials. I find it greatly helpful and learnt a ton of things. :)
as expected superb lecture delivery
Good stuff as always Kevin!
Thanks man, these relaxing easy css and html videos are keeping me motivated. Its a good break from learning JS... im kinda struggling there :)
JS can be hard at times, but it's always such a great feeling when you get something to work properly! But I agree, it's nice just chilling out and making some pretty things with CSS :D
Thanks again, Kevin, for another great video! Yes, I would be interested in a video deep dive.
Ok, this is amazing! Thank you so much!
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!)
Love this, thinking of adding one of these to my site.
just thankyou, so smoothly managed;)
Great video once again! As always Kevin :D I have a suggestion abou the topic, can you cover meta tags in HTML head, as in some of the websites when you look at the source code there are literally up to 50-60 different meta tags. It would be nice to explain what are they, are they all really needed and maybe what are the essential ones? THX! :D
Thank you so much. This video has saved me from great confusion. Thanks again.
That was awesome !! Thankx for sharing !! ✌
Thank you Kevin
You’re Amazing
one million thanks. you saved my life !!!
bro this is so good man
i watch 10+ videos but couldn't find the solution and this video solve all the problems with complete explanation
Tip of the day. Thank you Kevin..
Thank you sooooo 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 ~~~
I just love videos. The way you love CSS makes me wonder when you look at a site do you just check the appearance or its CSS kinda runs in your head like a preview or something :)
Most of the time I just guess how something is done. A bit like when I look at a design, I start breaking it down and figuring out how I'd do it. If it's something cool on another site that I have no idea how they did it I'll inspect their code :)
Really good video, recommending watching this one.
Thank you ! You are life saver
This is really amazing!!! Thank You :^))
Wow, how easy is that? Thank you so much.
Cool video Kevin..thank you So much ✌
Thanks, Kevin Sir for sharing wisdom💗💗
Hi Kevin, it's really nice explanation. Well done.
Nice. Easy and I know my CSS skills are good if I can yell out the answers before you implement it onscreen. Next: try a popup video modal with controls which I think your viewers might appreciate.
Kevin is a Legend.
Thanks a lot Kevin, not all heroes wear capes...
You are really awesome. Thank you very much.
So good tutorial thank you
Great video !!
Thank you so much! It just saved my a** :D
Hello! I love your videos I always find myself coming back to a few of them. And this was a video I didn’t know I needed until I saw it✌🏻 Can we get a video about developing a page where it has lots of svg pr png image design and some of them are animated or backgrounds to some other element?
Awesome thanks !!
U r always rocks dude
you are a saviour
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.
There are other ways to do it as well! I try to keep it as simple as possible :)
The series would be great. Dive deep into specific topics one by one. For example, a series about video background, css positioning, animations, transitions and much more topics about css like that. Each series with beginner, intermediate, advanced and master level mini projects. As I said, specific series about specific topics. It would really be precious I think, because the format like this is not out there, anyone who wants to learn like, should research videos manually one by one and little by little from different videos (tutorials). Have a nice day, your videos are just incredible, i wish you will have a little place in heaven for your effort
Good video! Would have liked to see you talk about using a background image to act as a fallback while larger videos load in.
Good point!
Thanks for this stuff
The problem with min-width and min-height is that if the video is large, it's going to overflow both horizontally and vertically. In short, it is not responsive, it just keeps its original size
Always awesome. An in-depth tutorial would be great and maybe a popup video modal.
most browsers have that built in nowadays, don't they? Try right clicking on a playing video, then you get the option for modal window. Since it is built into the browser, it should be fairly easy to implement automatically, say, when scrolling.
Personally I do not like this kind of automation. I like it to be totally up to the user.
Hey Kevin, any chance you can make an updated version of this video discussing newer/cleaner/more streamlined methods to implement videos into backgrounds or into banners. Was asked to add videos to a banner rotation section of our site and trying to figure out the best approach.
Kevin, the things you do with CSS are amazing and I am learning a lot from you. It does make sense and the explanation is very easy and clear, but would it work in real-world jobs? I am asking because I did work with some JS frameworks and in a larger team, things became a little messy. Thanks, man. Love your content. Can't wait for the course?
I don't see why this would cause any issues :)
Things do tend to get messy in bigger teams. Communication is super important.
a complete tutorial for video and audio would be great.
Just great!
Great tutorial! I came here hoping I would find a solution to make a video background WITH audio for a drumming website. So for background video we need to use the "muted" attribute, so how can we enable sound then? Add a button with some javascript that will allow the visitor to enable sound? Or add the video another way other than the tag?
Great video! I'm trying to use this on my website, but for some reason I can't seem to get the gradient overlay to appear over my video. It will appear for a split second when the page loads and then the video will cover it. I've tried using multiple z-indices and none of the seem to work. Any advice would be appreciated!
@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.
Thanks so much
Hi Kevin, it is well explained, but I found some problems following along because I don't know what video comes before that, so i could have the same code. Thanks for your videos!
I saw you have a tutorial for carrousel, does it also work for backgrounds? if not, could you do a video explaining how to do a carrroussel for the background? would be really helpful, thanks again!
Yes! HTML video!!!!
*_nice ... great ..._*
fantastic video Kevin. thank you. I just have one issue. I followed this tutorial to the T and everything worked. The only problem is my background video is ZOOMED IN how do I change it to ZOOM OUT?
So much love
Please do one for videos as you said!!
I wanna know how to load webpages faster
I agree with the dude below- embedding video in HTML5 has variations, so an explanation would be cool. RUclips uses vs the tag. So which is best? How to manage size and position on a webpage, etc. and still make RUclips video work along with loaded video within the site.
RUclips uses an because it's literally embedding something that is on another webpage into your page, so for that it's required. the is used for self-hosted content.
I do know playing with the can be a bit of a nightmare at times when it comes to the size and positioning of things. I have one on my own site that took a lot of tinkering!
Nice broooo
Nice video
Hi Kevin! I was distracted and typed the url of a mp4 video on the background-image property. Turns out the video plays and behaves as a background image should do. It even responded to the other "background" properties.
Is that a valid way to setup a background video?
Nice it is helpful to my project work . i also want to request the materials that you use
Oh thank you
Hi, I shrunk the vh to 50vh hoping that it would make the video smaller and all it did was cut the video size in half...what happened?
The another easy way to put the video in center is to add (object-fit: cover;)
Thank you Kevin. But I found this is not responsive for mobile. Well the video shows just the center part. And some issue in iphone, they don't play de background video. Any idea to solve this?
Oh man, I sort of screwed up on that one. I'll add it to the description, but it should work on iOS if you also add the "playsinline" attribute.
It will crop the video though, I did that on purpose. If you don't crop the sides off, it will take up a very small amount of space vertically, which will make it hard to have any text on top of it without overflowing out the bottom.
I would love to know your view about utility based css like tailwindcss. Love this video too.
I haven't taken much of a look at Tailwind yet, though it seems to be really gaining popularity. I see the pluses of using things like that when it comes to quickly putting together something, but often find they can sometimes get in the way. With all the good stuff about Tailwind that I've been hearing, I should check it out though.
How would you transition the video from the beginning of the site as a time function then removing the video entirely to show to the user?
I'm not sure I understand the question 🤔
@@KevinPowell so when the website loads up, the video will show up 1st. Once the video shows up for the one time it plays for the 7 seconds then i would want the video to be remove and showcase the rest of the the site.
thanks
Almost every client I have wants videos playing in the background. I think a more in-depth video would be helpful to a lot of people. I've got the one on my website muted, but it's still not playing on either Android or iOS.
There has one plugin bideo.js
Try to use that instead of this way as well
Great topic! Great video! How do you come up with topics??
A lot of the time it's questions people ask me in the comments, or when I stumble across something cool I'll make a video on that
@@KevinPowell noice!!
nice
HTML5!?! Yes yes yes yes yes !!!! 🙌🙌🙌
Tq sir
my video too much height .. i want to make it like 50vh .. but then it cut it and show only the top view >> how to minimize the height with and still have full video ?
prolly an overflow issue
Obrigado
Hi I followed this toturial, but my text is still on the background even with z-index set to -1; and the video is still in front please help
Hard to say without seeing it. Come to the community and ask! (link in description)
@@KevinPowell thanks so much for the response Kevin, i didn't think i'd get a response right away.
I figured out my problem, it was just something missed within the codes. Again thanks
Also I'm just starting out and everything is really going well, do you by any chance have any javascript tutorials?
Hi guys, im building a web using video as a background, and let say when it goes under 700px it will change to a different video as bg. how can i do that?
media queries
Hi can you teach us about advance html5 canvas
I could do basic html5 canvas stuff! I don't have a ton of experience with it, but it could be something I look into in the future for sure.
Hi, can I please have the code for this video please?
I try to do webpage in bootstrap like looks to youtube where are my own videos and also the videos uploaded by youtube, maybe you do such a video which would be responsive etc.
If you'd want to be pulling in videos from YT as well as your own, it would get a little complicated!
@@KevinPowell Hey it is little more complicated but I made some version for my own fun and use on my website
I for one would be interested in a deep dive for html video. I find embedding RUclips videos adds so much junk. Multiple js scripts, multiple link redirects etc etc. It’s just not efficient clean code.
For sure! The only issue is bandwidth :(
Vimeo does have a paid option for embedding video with no advertising or branding, it's not very expensive (about $6/month I think) as long as it's not for paid content.
These centering things always require some trickery. I think, it is for backward compatibility. 😉
the old way was to use negative margins, the reason he uses translate is for performance I guess.
i love you
Please make a video about images.. Like object fit, making it responsive and stuff.. Please. I can't afford your scrimba course.
I have many videos on specific topics like that already :)
And I'll always be making more.
codehal the header did'nt work
great video
can you send me the source
omg why isn't the code available for people to follow along?
its less than 50 lines just do it yourself and youll remember it better too
STACKING CONTEXT ! This only works, if your hero has no z-index. And if you have no stacking context "upstream" to the body, but any parent has a background, your video will end up behind that background... So, if you use this and one of the parents of your hero has a background, make sure, to create a stacking context in one of the parents of your hero.