How To Add Video Background In Website Using HTML And CSS Step By Step Tutorial
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Learn How To Add Video Background In Website Using HTML And CSS Step By Step Tutorial
In this video we will create a website header section and we will add a video in the background that will play automatically in loop.
For Domain and web hosting
Visit Bluehost: bluehost.sjv.i...
Bluehost tutorial:
• How To Make A WordPres...
-----------------------------------
Download image:
drive.google.c...
Download video: www.pexels.com...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
thank you so much for this video! after hours and hours of trial and error i’ve finally managed to slap a background on to my website, and it’s all thanks to you, sir!
This person is truly amazing!
How did you do it.. if I try the background-image on the div it shows no nothing
I have tried and tried and failed.. I am not a newbie either but the part of background image on a div never seen that happen
I still can't get my video background to fit perfect on the screen. For some reason I can't make it so that it fits the screen without having to scroll . The video is too big for the screen. I don't want you to have to scroll to view the video.
Me too, the same problem @@TheArtOfConduitBending
Sir... I watching your videos daily.. sir you have to put a (responsive part) of your in every video... if anyone agree with me .. pls like the comment..♥️♥️♥️
I totally agree!
please watch kevin powell videos ur all doubts will be cleared and Practice Daily.
agreed
Love ur videos, but plz also explain code/functionality/impact on other items as well while typing it. It will be greatful.
watching several hours finally of trials and errors i've have made it thank you so much for this video looking forward more vedios
Glad you liked it. Thanks for your comment. 😊
it will be easier to understand if you explain the couses of using css tags or explain how it makes changes
You are a life saver, thank you my fellow indian friend
Thanks Diogo, glad you liked this tutorial
Love u sir ap sa boht kuch sikha allah pak apko boht izat da kush rahooo sir
You rock! I have been a developer for a while but this was very clean and well done.
Hello, I a programmer too. Thanks for your help!
Its not programming bro
@@hamzailyas7617 You mean it’s coding right ?
@@avtandildevdariani4630 yeach
Dear Sir, Please create other multi page website in html and css. I watching your video ,,,Reallly awesome.
Could you please make it responsive. Thank you...love your tutorials! :-)
@radkakrenova we need media query syntax to make it responsive.
You may go with media query for this by putting pixel at which you want it to be responsive
Using Bootstrap grid
Thanks a lot brother I am a beginner but I've learnt a lot from this video. I am trying to create my music production website using HTML and CSS. Thank you!
Man, you are talented! Well done and thanks for videos!
you are so great keep coding
Sir can you make a tutorial on how to make the page responsive and add active links to explore button 😊
thx so much, and i wonder what program you are using, im trying diffreants, btw your the most underrated youtubers
i follow you since senegal
makasi ilmu nya prindapan people
Really I want to give you a millions of likes !!!!
Just what I needed. Thanks!
YOU ARE A ABSOLUTE BEAST MY FRIEND!!!!
Thanks henrik
It's very helpful thankyou ❤
I'm so glad! You're welcome 😊
ty man , you fixed problem I was searching for 2 days
Glad I could help
Is it responsive? Just wondering how it will be working in different devices . Good stuff
This is a very helpful video I will use this when I start to code a website
But that background is really so beautiful. You have a really good taste.
I can’t believe I just found your channel!!!!
thank you bro you saved me love from bangladesh
Your the best ever..... Thanks 😊 Alot........... You deserve all gift's
Thank you for such a nice tutorial. Also like the video showing the beautiful table mountain in Cape Town (South Africa).
Is there a way to disable the flickering on the video replay?
thanks you bhai you have done excellent work for this project.
A huge fan of your work mate👍🏽💙
THE BEST TUTORIAL EVERRRRRRR🎉
You really helped me improve my css level. Thanks alot for your hard work. May god bless you
Best explained video i have ever seen . Luv ❤
Okay I did everything this video says but the outcome is so 😞😞😞 bad
I think it's because I have a square monitor. Please make a video for those who have square monitors like me. I'll really appreciate. Thanks 🙏🙏🙏👍👍👍👍👍
I was finding it difficult in the Css but your tutorial just helped me out.
MAMI SOY TU VAQUERO DIME VAQUERO MAMI
Thanks for the Images and the Code that gave it to us! I really appreciate your work man!
Keep up with your coding journey! Liked Shared and Subscribed!
What is the best video resolution to do that? Will the website becomes heavy and load slowly? Max video duration? Thanks so much in advance for your response.
Thanks a lot, it helped me way more than expected, and especially the video u gave, although I did not use it, the website of the video helped me find the perfect one.
Glad it helped
dude thank you so much i was stuck so badly :)
Thank you For this Wonderful Tutorial, I really Understood Everything, Keep it Up
I really appreciate your commitments...
This was very amazing thank you very much sir please keep it up✅
Thanks dude I was really confused since i am a beginner, the video was really helpful and to the point, excellent !
best video ever love you daju dhoti
Thank You. You Make My Day Bro..
You're welcome Thamoddya
Hi Easy Tutorials can you make a tutorial on how can we make our own video editing website like Invideo.
You want to make your own video editing website?
@@yoyoclockEbay I want to
@@NoCopyrightsongs661 No idea how to do that
@@yoyoclockEbay ok
@@NoCopyrightsongs661 It sounds complicated
excelent video thank you so much
Very helpful. Thanks!
God bless you and your family
Best best best bro...... You are helping us too much..... A big THANK you to you 🔥🔥👍👍🙏
Than you for making this video!
I have learn alot. Thank you.
at first it was looking like rocket science
but after 3 month of learning css for some minutes a day
it is just a simplest webpage using hyperlink margin and url
This is great! I want to use this at my work's website - but the video doesn't play in the browser (chrome, safari) when I try to publish it. Is it because the video is stored on my private Mac? I'm using a Norwegian website builder which allows me to add an HTML element where I can post this code, but the video is not playing. Do I need to upload the private video to a host server?
yes you need to upload the video also then update the video file path in the code
How do you choose color for your website??
Please make a video
thanks a lot sir
You're Welcome. 😊
The texts California Explore sit at the center top on my screen. How do I get it in the center of my screen like yours is please? In another word, how do I move the content up/down along the Y axis? I tried a few things, they're not working. When I try margin: auto, the texts disappear. Great video!
Hey.. Can you recreate unreal engine site pls with video background which gets small while scrolling down and shifts to centre and fades?? Pls
beautiful video. thumbs up
Very helpful .🎉❤😊
thanks for helpful tips, liked and subscribed!
Thank you very much it was helpful
Brother can you please make it responsive too it will help alot❤
Great content! Thanks for sharing.
Glad you enjoyed it!
I have watch another tutorial, and im not sure what i am doing wrong, i added the video but when i live preview video is not showing nor playing, my video format is. mp4 and i was wondering does it have anything to do withe the video size? what is the size of the video you used in this tutorial, because that would be the only thing that differ from everything else.
Anyone with any suggestions i would really appreciated it. Thousand thanks in advance!
I really appreciate your videos brother. And can you teach us the buttons we are using, to navigate those into somewhere in the website?
Thankyou ♥️ Your videos are amazing ✨
thanks a lot
Thank you so much sir
Thank youu soo muccch brooo i loveee your videos❤️👌
nice
Wow bother its really wonderful.
That's my home town lol. Cape Town.
Sir I'm watching all the video.
Please make video on angular series
thank you so much for this video and your channel honestly... i have an issue that the section with nav with the buttons is going beyond the background, i don't know what to do someone has this problem too? i think it's an issue with boxes but don't know what i did wrong.
EDIT: i realized i forgot to put "box-sizing: border box" at the beginning of the css document lol
make sure that the nav section is written inside of the div (hero)
Amazing job, thanks for sharing.
There is a way to make the video slower? Thanks!!
Thank you brother
Hey! I was wondering why position:absolute in my "back-video" class takes away the video from my webpage, I'm just learning how to code and had started over, but I figured out it wasn't the code but just one small detail. Any insight?
that's cape town, where I live :)
God bless you
nice creative
Thanks brother ❤
sir everything is cool but i am not able to make background video responsive... like the text is responsive but backgound image is not
Sir can you make a tutorial on how to make the page responsive
Thanks Bro
Welcome
thank you so much has always i love this
video
You're welcome 😊
Can you also share coding methods cause I am a beginner.
Thankz for you help ❤❤❤
Why are my links not going over the video as a background it keeps positioning under it.
I've literally written the exact same css but I cannot get the same hover effect!
What could go wrong?
Very useful video
wonderful video good explanation, great job, keep it up.....
Just Awesome
Thank you sir
It is Working!! But (click to whatsup icon) is not showing while video is playing but when curser point towards icon, it is working but not showing in video at bottom right corner.
Perfeito, você resolveu meu problema.
Hi, I subscribed to your channel. Can I get the source code?
Wanted to know how to make the explore button change color when hovering over with mouse, any help appreciated