Setting muted will also allow the video to autoplay on iOS devices. Otherwise it will only play if the user requests it to (i.e. call .play() video API in JS).
You are probably the best web development teacher I have ever seen. I wish I could sponsor you. Keep up the good work and thanks for teaching new stuffs to us.
These tutorials are lifesaving, and they're a joy to circle back too. Your audio setup is fantastic and I never hear any background noises. I appreciate your efforts and explanations.
hi guys, I had an issue with Chrome at 6:15 . Mozilla was playing the video fine, but Chromewould not start to play at all. Stackoverflow has a sollution in question "HTML5 Video autoplay not working", but I still needed to edit it. A sollution, which worked for me was:
Dude! Every little question or idea I have and type into TH-cam search field is answered by You!! You’re the man. I literally clapped when I started watching this video!
Thank you for this tutorial! To make the video fully responsive (and scale down below its resolution) I had to use these settings in the .fullscreen-video-wrap video{ top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
You did all that without any Bootstrap, very cool. When I do this same project I'm going to add a ton of comments to cover the little bits of knowledge that I've just heard. Excellent instructor, I let all the new folks know if it's your TH-cam video or a paid course by you to drop the coin and watch. Keep broadcasting!!
If the text in div.header-content is very short, it will not align center. Correct this by adding the rules: margin-left: auto; margin-right: auto; to .header-content in the css! :-)
That is a good suggestion! Here, in this case, we know that the v-header is a flex container and the header-content is its child, so, just add "justify-content: center" in the v-header class and see... the header-content will be centred. KNOW MORE: In a flex container: a) The property "justify-content" is used to align the flex items along the main axis of the flex. (It will align the items horizontally in this case.) b) The property "align-items" is used to align the flex items along the cross axis of the flex. (It will align the items vertically in this case.) Both the properties accept these values: center, flex-start, flex-end, stretch, etc. Note: A child of a flex container is referred to as a flex item.
Another great tut. Thanks for all you do for the coding community. I've bought a number of Udemy courses, and I can say that your style is the one that I enjoy the most. Thanks Again
just a great tutorial to follow through, I swear. about the right pace and about the right explanation. my webpage looks dope after implementing a video to the background after this tutorial. thanks a million!
Thanks for another informative and practical project! This is the second responsive site I've attempted and your videos are terrific for explaining process+rationale. It's very satisfying!
A) To address your loud keyboard, get the quietest keyboard you can find + get a directional mic and aim it square at your voice box. (Personally, I do not have any issue with hearing a keyboard myself.) B) This example works well, minus one aspect. The video fills the screen but does not resize when shrunken down or resized.
Brilliant. I've been struggling with doing this very thing since yesterday. I was getting really lost trying to style it properly but you showed exactly what I needed to do. Thanks for sharing your knowledge.
Hi Brad, you have added overflow-x: hidden; at 9:25, its great. Its also need to add in your other video Scroll Reveal Bootstrap Page, where the horizontal scroll is showing.
If your text does not show up on top of de video you might check if h1 p and a are inside of the div. I did this wrong and spend an evening searching for it. I love this video, your channel and courses!
Just as usual, all your courses are 100% awesome. Thanks alot you've thought me lot. I pray I get a job soon to enable me become your regular patron. Please if you have a course on Sequelize and PostgresSQL or make one, I think as I need it others may also be interested. Thanks again
add this to the video tag to make it more responsive .videoInsert { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; overflow: hidden; }
Thank you and forgive me if I'm wrong. I doubt neither version "scales" the video and was wondering if videos can works like background-image like typical format below. .bgimage { width: 100%; height: 100%; background-image: url("image.jpeg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
Dude, I love the loud keyboard. I grew up on old stuff, and my high school even had manual typewriters probably left over from the 40's or 50's:) I love typing, coding....all related sounds..music! But I'm crazy.....
Hi Brad. Just a thought on keyboards... if you can get hold of a corsair rgb strafe with cherry mx silent keys to try. It's not a cheap option but it ticks the mechanical and quiet boxes...
Hi Brad, I like all of your videos. I have just one request that when you write CSS then please split the editor and open the HTML file also parallelly. I think this may help me understanding better.
Thanks for this video. Do you know what's the best extension to use for videos? I want to make a video background for a my mobile web page, however I don't want this video takes too many time downloading first time. Maybe lazy loading is an option...
Hi Brad, I am recent viewer. I have been going over your videos and have found them very helpful. I recently worked along side this video, and added some extra content into it. I have noticed that I am running into a slight problem. I use VS code along with live server. When I save (control S) the video stops playing in the background. I restart the browser, and occasionally it will start working again. But sometimes, it wont work until I continue to add more code (random css or comments). The code has no link to the video. I am not sure if you would be able to help out with this. Thanks again, David
Does iOS still have issues with VH and VW? I know a year or two ago, iOS Safari would consider the entire height or width of the document rather than just the viewport. This made for a super zoomed image for users on that browser.
You might want to look at Open Broadcaster Software "OBS" and set it to record. It's an open source recorder which most streamers use. Extremely good at recording locally also.
I'm trying to figure out how to keep the video centered in the window when resizing and not cut off the right side of the video. What code would i need for that?
## I need help!! I am trying to add a navigation menu to the top without any background, only the text (home, about, contact, etc) will be displayed, I guess this means opacity = 1. But the thing is am having problem with positioning it above the video without messing up the original design
Thank you brad.i remember when for my first time i started to write html and css looking your videos ..XD thank you . I appreciate what u'r doing ..good video tutorial
What should be the recommended file size or duration of the videos when using them for page backgrounds? Don't they increase loading times for people with bad connections?
I have a video where a ship is sailing in the middle of the video. So whenever I view the site from my tablet in portrait mode, the video is not centered. I see half (or less) of the boat sail by. How can I set the video in the center of the screen in media query? Or should I upload a second video for that size for responsive mode? Thank you.
great video like always, thank you. if the arrow keys are screwing you over, use the vim plugin for your visual code and never take your hands off your home row again. you could, ofc, just switch to vim altogether :)
thank you, any chance you could explain more about css like when you say "border-box" could you explain some more what's it's doing exactly? maybe that could be another video explaining all this stuff. any chance you could show how to build the whole page you were show that shows the video?
One more thing I can not get my video responsive with min-width and min-height. Only with regular width and height but it does not cover the full screen with just those elements. Any suggestions?
Great tutorial!! I do have a question. I have been playing around with your code, and everytime I remove the the whole text(h1) and button swift to the left and I can't seem to make it go center or to the right.
Hello, after watching your video I have a simple question. As you see, the video in the background (wich is visible) will always be from the left side beginning. Is there a possibility to center the video in the background. You will see it mostly when making the browser width very small. But as always, thank you a lot for this awesome videos.
Correct me if I am wrong but with regards to centering the text, since the .vi-header class is being defined as a flex box container by setting the property: display:flex and we vertical align our flex items using the align-items: center property, wouldn't it make sense to also use: justify-content: center ? Thus we would not need to use text-align: center ... Please correct if I am wrong ..
Thank you very much for this tutorial, I am so glad that I have learnt so many things including (align-items: center;) I didn't know about it, I was struggling on aligning contents each one, THANK YOU AGAIN :)
Loved the video! I did have a question. Regarding these large video and images files being used in these type of applications, how do you handle the loading or pre-loading of these to ensure a good load time on a given website?
Thank you so much for sharing! I have a question which is when you are defining the width or height of the element, is there any difference between using 100% and 100vh(vw) to achieve full height/width?
Very good but the video does not starts automatically on chrome.How do I play the video through code to make sure the video is going to play? How to deal with this kind of problems that something works on one browser but not on anothers?Thank you
Guys i am having problem. When i am shrinking browser from top to bottom or bottom to top, div="header-content" is mixing with section class. I dont know to fix header content to stay at his place while shrinking. Please help.
You just helped me a ton brotha, thanks. Also, check out the HP Elite Wireless V2 keyboard. More low pro, quiet keys like a laptop - if you're looking for less clackity-clack.
Brad, great video! I'm learning so much from you. Next time use a mechanical keyboard cause I love the sound of mech keys, thumbs up guys if you agree!
Great video as always! Is there anything that could be added to force the video to be centered always, scaling as needed but filling the screen it has to work with?
Turns out this does it, for anyone else looking. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width:100%; min-height:100%;
Could someone explain the logic behind using two words for a class element and then styling them separately? For example: " which is later styled separately as .v-header and .container. I didn't know that was possible and I am confused. I dont understand what's what.
What when the css file is app.mim and I can't find anything so I can do my changes, or if I unminize what I do after that . Can you cover anything about css mim file? Thank you
That was a pretty sweet tutorial, man! Just one question, how do you mute the audio? I don't want to hear the keyboard noise from the video. Edit: This can be done by adding the muted="false" inside the video src tag.
How can different screen sizes be handled effectively? With this method, the video is cropped as the screen size gets smaller. Would it be worth the effort to use Javascript to serve different videos for various screen sizes?
Brad, don't listen to the haters. The sound of a super loud mechanical keyboard is music to a developer's ears.
True!! .. I felt same.
I was just going to make that same type of comment. I love the sound of typing on a keyboard.
That's true, videos without that sound are boring))
Seriously I love the Keyboard sound. "Music to every coders "
True that!
If you use your own video with sound, use the muted attribute. Example: Another amazing video, thank you Brad!!
Good tip
Setting muted will also allow the video to autoplay on iOS devices. Otherwise it will only play if the user requests it to (i.e. call .play() video API in JS).
Would it also be a good idea to remove the audio from the clip so that the file size is reduced?
DUDE YES THANK YOU SO MUCH!
Or even better, transcode the video without sound and the filesize get's smaller and loads faster.
You provide free education and people complain about your keyboard? Keyboard is no bother and thank you for your videos.
You are doing blessed work. Once I get my first coding gig I’m donating money to you for sure.
Thanks man, I appreciate that.
Same here
I am fairly young(just 15) but I look forward to repay Brad for his help in the future, someday!
SAME
Yeah me too..
You are probably the best web development teacher I have ever seen. I wish I could sponsor you. Keep up the good work and thanks for teaching new stuffs to us.
Just watching with no adblock and liking is supporting me more than you know :)
These tutorials are lifesaving, and they're a joy to circle back too. Your audio setup is fantastic and I never hear any background noises. I appreciate your efforts and explanations.
hi guys, I had an issue with Chrome at 6:15 . Mozilla was playing the video fine, but Chromewould not start to play at all. Stackoverflow has a sollution in question "HTML5 Video autoplay not working", but I still needed to edit it. A sollution, which worked for me was:
change the video width to "auto"
Thanks Simon! I was wondering why my video was not playing in Chrome when I coded it.
I had similar problem. Added muted="true", and its worked for my Chrome for some reason))
Got the same issue.
Got solved by adding MUTED to the video src section ^^
Thanks man, it helps me now.
Dude! Every little question or idea I have and type into TH-cam search field is answered by You!! You’re the man. I literally clapped when I started watching this video!
Thank you for this tutorial! To make the video fully responsive (and scale down below its resolution) I had to use these settings in the .fullscreen-video-wrap video{
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
Thanks A lot Bro !!
thank you!! Ive been searching for this config for the last 2 hours, really appreaciate it!
You did all that without any Bootstrap, very cool. When I do this same project I'm going to add a ton of comments to cover the little bits of knowledge that I've just heard. Excellent instructor, I let all the new folks know if it's your TH-cam video or a paid course by you to drop the coin and watch. Keep broadcasting!!
Best tutorials from Brad, everything from front-end to back-end. BIG RESPECT!
If the text in div.header-content is very short, it will not align center.
Correct this by adding the rules:
margin-left: auto;
margin-right: auto;
to .header-content in the css!
:-)
this comment saved me a ton of time. Thanks alot
You are a hero.
Thanks man!! I was racking my brain!
I spent over an hour trying to figure this out, thanks a ton.
That is a good suggestion!
Here, in this case, we know that the v-header is a flex container and the header-content is its child, so, just add "justify-content: center" in the v-header class and see... the header-content will be centred.
KNOW MORE:
In a flex container:
a) The property "justify-content" is used to align the flex items along the main axis of the flex. (It will align the items horizontally in this case.)
b) The property "align-items" is used to align the flex items along the cross axis of the flex. (It will align the items vertically in this case.)
Both the properties accept these values: center, flex-start, flex-end, stretch, etc.
Note: A child of a flex container is referred to as a flex item.
Who needs bootcamps when you have Traversy Media?!?? SUBSCRIBED!
Another great tut. Thanks for all you do for the coding community. I've bought a number of Udemy courses, and I can say that your style is the one that I enjoy the most. Thanks Again
just a great tutorial to follow through, I swear. about the right pace and about the right explanation. my webpage looks dope after implementing a video to the background after this tutorial. thanks a million!
Autoplay attribute doesn't work(in Chrome and Safari) unless you put muted attribute too!
thank you
Same for current Firefox version
What changes should I make so autoplay works on Chrome
@@ashutoshmadhav1488 put 'muted' in video tag. example: SOURCES
Thank you!
Someone actually complained about the sound of your keyboard? Really?! Keep doing you. You are doing us a huge favor making these videos. Thank you.
I have been scratching my head for half an hour. Finally got it. Tnx a lot. :')
Thanks for another informative and practical project! This is the second responsive site I've attempted and your videos are terrific for explaining process+rationale. It's very satisfying!
A) To address your loud keyboard, get the quietest keyboard you can find + get a directional mic and aim it square at your voice box. (Personally, I do not have any issue with hearing a keyboard myself.)
B) This example works well, minus one aspect. The video fills the screen but does not resize when shrunken down or resized.
Thanks Traversy! I've been teaching myself with W3Schools and edX classes. You're vids are easy to understand and very informative.
Brilliant. I've been struggling with doing this very thing since yesterday. I was getting really lost trying to style it properly but you showed exactly what I needed to do. Thanks for sharing your knowledge.
Hi Brad, you have added overflow-x: hidden; at 9:25, its great. Its also need to add in your other video Scroll Reveal Bootstrap Page, where the horizontal scroll is showing.
How are your files working? I downloaded the codepen files and the video doesn't even show up on Chrome/Firefox.
If your text does not show up on top of de video you might check if h1 p and a are inside of the div. I did this wrong and spend an evening searching for it. I love this video, your channel and courses!
Just as usual, all your courses are 100% awesome. Thanks alot you've thought me lot. I pray I get a job soon to enable me become your regular patron. Please if you have a course on Sequelize and PostgresSQL or make one, I think as I need it others may also be interested. Thanks again
Thank you man. I am looking into sequelize
hi... how far have you gone
i like the way you are explaining those things, you make them easy to understand
Another great video, Brad. You're a very good teacher. I enjoy your Eduonix videos as well. Thank you.
You deserve a million subs to be honest. I Appreciate your work. Thanks :)
add this to the video tag to make it more responsive
.videoInsert {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
muchas Gracias juan!
Thank you and forgive me if I'm wrong. I doubt neither version "scales" the video and was wondering if videos can works like background-image like typical format below.
.bgimage {
width: 100%;
height: 100%;
background-image: url("image.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thanks a lot man!!!!
I like the sound of a mechanical keyboard! Great video as always btw! Thank you Brad!
Dude, I love the loud keyboard. I grew up on old stuff, and my high school even had manual typewriters probably left over from the 40's or 50's:) I love typing, coding....all related sounds..music! But I'm crazy.....
I know a lot of people like it, including me but I think more complain unfortunately
Hi Brad. Just a thought on keyboards... if you can get hold of a corsair rgb strafe with cherry mx silent keys to try. It's not a cheap option but it ticks the mechanical and quiet boxes...
Awesome video brad. I love watching your videos.
For transparency i use rgba instead opacity, rgba does not make text transparent, only bg.
Hi Brad, I like all of your videos. I have just one request that when you write CSS then please split the editor and open the HTML file also parallelly. I think this may help me understanding better.
Thanks for this video. Do you know what's the best extension to use for videos? I want to make a video background for a my mobile web page, however I don't want this video takes too many time downloading first time. Maybe lazy loading is an option...
Hi Brad, I am recent viewer. I have been going over your videos and have found them very helpful. I recently worked along side this video, and added some extra content into it. I have noticed that I am running into a slight problem. I use VS code along with live server. When I save (control S) the video stops playing in the background. I restart the browser, and occasionally it will start working again. But sometimes, it wont work until I continue to add more code (random css or comments). The code has no link to the video. I am not sure if you would be able to help out with this. Thanks again,
David
Loved this video! Want to watch all the other ones you have. you getting mad at the fly was pretty funny...
Does iOS still have issues with VH and VW? I know a year or two ago, iOS Safari would consider the entire height or width of the document rather than just the viewport. This made for a super zoomed image for users on that browser.
You might want to look at Open Broadcaster Software "OBS" and set it to record. It's an open source recorder which most streamers use. Extremely good at recording locally also.
I'm trying to figure out how to keep the video centered in the window when resizing and not cut off the right side of the video. What code would i need for that?
exactly! if your problem has resolved by now, please share with me the solution.
This is what I needed right now. Thanks so much. Enjoying your udemy course too.
here is the place to get good stuffs about web development.i really really like this channel
## I need help!!
I am trying to add a navigation menu to the top without any background, only the text (home, about, contact, etc) will be displayed, I guess this means opacity = 1. But the thing is am having problem with positioning it above the video without messing up the original design
Thanks for sharing your knowledge in such a selfless way, buddy! Cheers
Wow.... Loved this! can't wait to try it out myself. MANY THANKS!!
Thank you brad.i remember when for my first time i started to write html and css looking your videos ..XD thank you . I appreciate what u'r doing ..good video tutorial
Love your videos man. You have definitely helped me out on some things I have gotten stuck on.
Glad to hear it :)
What should be the recommended file size or duration of the videos when using them for page backgrounds? Don't they increase loading times for people with bad connections?
I have a video where a ship is sailing in the middle of the video. So whenever I view the site from my tablet in portrait mode, the video is not centered. I see half (or less) of the boat sail by. How can I set the video in the center of the screen in media query? Or should I upload a second video for that size for responsive mode? Thank you.
great video like always, thank you.
if the arrow keys are screwing you over, use the vim plugin for your visual code and never take your hands off your home row again. you could, ofc, just switch to vim altogether :)
you're the man dude, keep it up helping other people..tnx
Great content as usual! Thanks for the helpful tutorial and keep it up!
this is so usefull. Thanks man! You saved my semester hahaha
thank you, any chance you could explain more about css like when you say "border-box" could you explain some more what's it's doing exactly? maybe that could be another video explaining all this stuff. any chance you could show how to build the whole page you were show that shows the video?
One more thing I can not get my video responsive with min-width and min-height. Only with regular width and height but it does not cover the full screen with just those elements. Any suggestions?
Great tutorial!! I do have a question. I have been playing around with your code, and everytime I remove the the whole text(h1) and button swift to the left and I can't seem to make it go center or to the right.
Thank you, Brad! You're awesome.
Hello,
after watching your video I have a simple question. As you see, the video in the background (wich is visible) will always be from the left side beginning. Is there a possibility to center the video in the background. You will see it mostly when making the browser width very small. But as always, thank you a lot for this awesome videos.
Correct me if I am wrong but with regards to centering the text, since the .vi-header class is being defined as a flex box container by setting the property: display:flex and we vertical align our flex items using the align-items: center property, wouldn't it make sense to also use: justify-content: center ? Thus we would not need to use text-align: center ... Please correct if I am wrong ..
Thank you very much for this tutorial, I am so glad that I have learnt so many things including (align-items: center;) I didn't know about it, I was struggling on aligning contents each one, THANK YOU AGAIN :)
You are very welcome
I LOVE YOUR WORK YOU LITERALLY GIVE RELEVANT INFORMATION THANK YOU SOO MUCH
Hello Brad, tnx for this amazing tutorial can you please tell me how to make the video responsive?
Loved the video! I did have a question. Regarding these large video and images files being used in these type of applications, how do you handle the loading or pre-loading of these to ensure a good load time on a given website?
Thank you so much for sharing! I have a question which is when you are defining the width or height of the element, is there any difference between using 100% and 100vh(vw) to achieve full height/width?
Ah dude this is dope, might just use this method over particles.js as my portfolio header
If I make section a darker.. how do I prevent a gap between the video and section A?
Very good but the video does not starts automatically on chrome.How do I play the video through code to make sure the video is going to play? How to deal with this kind of problems that something works on one browser but not on anothers?Thank you
im in California and also this time of the year flies are everywhere!
They suck
Guys i am having problem. When i am shrinking browser from top to bottom or bottom to top, div="header-content" is mixing with section class. I dont know to fix header content to stay at his place while shrinking. Please help.
Finally back to html & css. love it! :D
Great video brad. Can u make a video on creating new things. Like your ideas or how you create new awesome things.
Thank you for the tutorial, in fact you are more than prompt in answering our request
Curious when i put the z-index on the header-content class the text doesn't appear until i put the property postion:relative
Should youtube embed video work? I don't seem to get it work in the pen
you are looking at something 17:33, 17:43, 16:19, still, thank you for teaching us free!
He's looking at his notes on a separate screen. Every good professor has notes. You'll see this I school at higher levels. He's discussed this before.
You just helped me a ton brotha, thanks. Also, check out the HP Elite Wireless V2 keyboard. More low pro, quiet keys like a laptop - if you're looking for less clackity-clack.
how can I do so I can have the video on half of the screen and not full screen? I mean from top to bottom half of screen
Many thanks ! From France ! ;)
thanx for the nice video. how is it possible to seemless loop a video without pause or stutter?
Brad, great video! I'm learning so much from you.
Next time use a mechanical keyboard cause I love the sound of mech keys, thumbs up guys if you agree!
Why is it that when I put controls they controls are a high z index on top of everything?
good job Brad!!Thanks a lot!Keep going
Thanks bro. Love your vids. Go Pats!
Great video as always! Is there anything that could be added to force the video to be centered always, scaling as needed but filling the screen it has to work with?
Turns out this does it, for anyone else looking.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width:100%;
min-height:100%;
Could someone explain the logic behind using two words for a class element and then styling them separately? For example: " which is later styled separately as .v-header and .container. I didn't know that was possible and I am confused. I dont understand what's what.
What when the css file is app.mim and I can't find anything so I can do my changes, or if I unminize what I do after that .
Can you cover anything about css mim file?
Thank you
That was a pretty sweet tutorial, man! Just one question, how do you mute the audio? I don't want to hear the keyboard noise from the video.
Edit: This can be done by adding the muted="false" inside the video src tag.
Amazing work, i have learned a lot from this tutorial.
Another great video from the "Lord of the Flies" (apologies to Golding).
keep up the good work! Appreciate it. It's really helpful.
Brad,
bloody flies, bloody keyboard! Made me chuckle, will swap for bloody mosquitoes and bloody buffaloes trying to eat my plants.
West
Hey it might sound silly but what if we use a 4k video? I used a 4k video, and it only shows a little corner of it.
You explain amazingly! Thanks for sharing your knowledge.
How can different screen sizes be handled effectively? With this method, the video is cropped as the screen size gets smaller. Would it be worth the effort to use Javascript to serve different videos for various screen sizes?
Hi. Can we show any image for back support till the video load???
Thanks a lot dude! You truly helping us with an amazing content... keep up the good work!
Many thanks Brad great help.
What are the differences between height = 100% and height = 100vh ? Big fan of you since Udemy.
Flies :) I'm from Russia and here three days ago was first snow :) Like this time cuz there's no flies this year till may... Tnx for great content !:)