For anyone new, a wayyy simpler way to change embed size is to set its container's height, then use { height: inherit; } This sets the 's height to that of its parent element.
thank you man. also, I have a question as you seem to understand HTML well. When I´ve got multiple tags with different classes, how does each know its ending tag, when they are not distinguished in any way? Thank you in advance
@@mareknovak1147 I think I understand what you're saying but it does it based on nesting. Let's say you have one div inside another div. The innermost divs are seen as together, because it's nested inside the other.
Awesome video, but just a heads up for anyone using bootstrap you can use: class="embed-responsive-item" to make your video 100% responsive. Here is an example below:
The most useful lesson I learned from watching the video called “How to Create HTML5 Videos and Embed Videos” on “TH-cam,” is how to embed in a video on my site in the root folder. You can insert them from a website or you can have a link from a site that you have uploaded your own video. It is easy to use your own video you upload on TH-cam or a diffent location because it will use less space and you will not need to worry about using your own hosted website.
This information is very helpful. I think that TH-cam has changed the options you are allowed to control when embedding a video. There is no option to turn off suggested videos when the video finishes. Do you have a way to do this with some coding? It's very annoying to have suggestions pop up on a web page when the video ends. Thank you.
thank you so much sir Danial.I am having some problems with setting the width and height of video.no matter what I do the width does not change.But I know I will find the solution shortly.thanks again.
Thank you man, for the video, I just converted a random TH-cam video to mp4 and embedded it in the coding. And now I think I can just open the website and listen to music without WiFi.
Thank you very much. I needed this. However, this presented an issue. There was too much space beneath the video. The way I solved it was by putting in videowrapper and the margin-bottom - (minus) whatever pixels I need. Worked like a charm. Thank you once more for the tutorial!
Another great tutorial. Many thanks. This was really helpful as inserting videos into websites can be tricky. I am happy to hear that your next video is going to be on responsive design as I have some questions about using absolute values in sizing by pixels as opposed to sizing by percentage.
QUESTION :-) Hi Dani and thank, I tried this and gave me the same result: * { margin: 0; padding: 0; } .wrapper { margin: 0 auto; width: 80%; } .videowrapper { position: relative; padding-bottom: 56.25%; } .videowrapper { position: absolute; height: 100%; width: 100%; } I removed from (.videowrapper) [padding-top] and [height] and from (.videowrapper ) [left right top bottom] The magic ratio is 56.25% :-) My question is: if I want to embed a video with ratio 3:4, the ratio still 56.25? Have a nice day
Hey man, following your video tutorial to learn HTML & CSS. Love them and they are really helping me understand it. Have a doubt: Firstly, why did you put height=0px and isn't padding used to create that idle space where nothing can be put? Because here you've put the whole youtube video in that box.
It's because of the position:absolute, and of course the relative position of the parent tag, when you set the position to absolute the height of the parent tag does not matter and the only important thing is the actual size of the parent tag that has the relative position (even if it's created by padding and not with width and height)
How would the code look if I wanted to play multiple videos from files on my computer. Specifically, if I had a series of videos that I wanted to play one after the other, and endlessly loop.
bro this is 2022 l wonder if any changes of embing a TH-cam video on websites have changed to a much easier form if so can you do a video on that. Thank you
My problem with this is I cannot use position: relative to the video wrapper, because my header menu is already set to relative to avoid my dropdown submenu from pushing the contents in the body. I set my wrapper to have a fix height and width, and then set the iFrame height and width to both have 100%, but it's not responsive like the one you have.
Hello! Your tutorials have been great so far. I have learnt a lot. However, the video integrated fine but the sound isn't coming out. How do I correct this please?
My browser is supposedly the latest one, but when I embed my video (an mp4) on my site (using the root folder on the site) only the audio plays, not the video. So then I wanted to make it use vlc player to play it because any video type should play that way...but can't quite get it right.
quick question how do i embed or loke a website that has more then one video i am trying to creat a appand i want me churches vimeo page in my app but i can only do a single video do i use a embed or would i use a i
Code doubt: I was bothered by the calculation as I did not understand the math. No blame on the video. The OP tried to explain as clearly as possible. Maybe I am just dumb. So, I tried playing around with the css file and I happen to achieve the same by removing some of the code elements which I did not understand.: my code: *{ margin: 0; padding: 0; } .wrapper{ border: 2px; border-style: dotted; /* added border to avoid using INSPECT ELEMENT */ width: 70%; margin: 20px 20px; } .vidwrapper{ border: 2px; position: relative; border-style: double; /* added border to avoid using INSPECT ELEMENT */ padding-bottom: 56.25%; /*100 divided by 56.25 gives the same ratio as 16 by 9 */ } .vidwrapper { position: absolute; height: 100%; width: 100% } Help needed: Would there be any scaling issue later on? Cause it seems to work for now.
Waiting for a long long vlog daniii from long time when we can see your vlog .....i really wanted to see the area where u live and lot lot more i wanted to see
PLEASE, I have a question I have a website and I want to embed a video from TH-cam but I want the embed video including the speed of the video the playback rate. Thank you :)
Hi Mmtuts, thanks for the video. Do you have any videos on how to embed a simple URL? like.. extract the meta tags and show a little preview to the link on your website, e.g. with an Image, title, and description? Thanks!!
your video is great, but one question, how can i 3:07 How to change the quality of the video (same like youtube) in html ? for example we want show video with low internet to people ? can you handle it ? or do you have any video about it ? many thanks if you answer.
Hey Dani - Thanks for the video - I would have been lost without it. Got everything working on my pc fine, but once it is uploaded to my server - the image of the player is there, but it will not play. When I hit the refresh button the play button flashes white - then off and nothing. Any suggestions?
I am going to be uploading some videos on youtube for my piano lessons but that is going to be the free lessons.. Eventually, I would like people to come to my website to watch more videos, where they have to pay for the services... Do I need to upload the videos to an online database service? Some people mentioned about vimeo services but they are not free...
Well i use the code as per the lesson but video didnt start to play so might i have to change the browser so this code will work other wise all good if not help please
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: th-cam.com/video/v8jDnBYc0bs/w-d-xo.html&ab_channel=DaniKrossing
i think there should be a separate video explicitly on padding, margins, pixels, percent, and positioning.
Embedding a video online - 8:00
For anyone new, a wayyy simpler way to change embed size is to set its container's height, then use
{
height: inherit;
}
This sets the 's height to that of its parent element.
thank you man. also, I have a question as you seem to understand HTML well. When I´ve got multiple tags with different classes, how does each know its ending tag, when they are not distinguished in any way? Thank you in advance
@@mareknovak1147 I think I understand what you're saying but it does it based on nesting.
Let's say you have one div inside another div. The innermost divs are seen as together, because it's nested inside the other.
Thank you for taking the time to create this lesson.
thanks for teaching me how to embeld a video in my own web site, have a nice day
Thank you for your video! It was a much help!
Best Video Dani it helped me out greatly thanks!
Thanks a lot! Very clear explanation.
Super bro... Its worked and quite responsive too.
i like your practical oriented approach and it will surely give confident to build professional website . thank you
Thanks man it was very helpful.
been watching for a couple days really simple for beginners
Wow! Great explanation. Thank you.
Great job mate, thanks.
Pepole like u r really helping others learns....♥️
Thx, your videos are awesome!
Thanks man. This was a well-explained video.
Top notch tutorial. Thank you.
Awesome video, but just a heads up for anyone using bootstrap you can use: class="embed-responsive-item" to make your video 100% responsive. Here is an example below:
Awesome lesson and very easy to follow along
In fact l love your videos. Thanks so much
Thanks man, really helped my site.
Thanks for your video, it's help me lot, I was stuck at video input...😊
big up man this video helped me out in 2019
Thank you so much. You helped me a lot
The most useful lesson I learned from watching the video called “How to Create HTML5 Videos and Embed Videos” on “TH-cam,” is how to embed in a video on my site in the root folder. You can insert them from a website or you can have a link from a site that you have uploaded your own video. It is easy to use your own video you upload on TH-cam or a diffent location because it will use less space and you will not need to worry about using your own hosted website.
Thanks a lot my bro, very helpful for me. New subs,
This information is very helpful. I think that TH-cam has changed the options you are allowed to control when embedding a video. There is no option to turn off suggested videos when the video finishes. Do you have a way to do this with some coding? It's very annoying to have suggestions pop up on a web page when the video ends. Thank you.
super helpful - Merc
I really enjoy learning with your video, thank you for your work!
thank you so much sir Danial.I am having some problems with setting the width and height of video.no matter what I do the width does not change.But I know I will find the solution shortly.thanks again.
Wow you rock it
Thank you man, for the video, I just converted a random TH-cam video to mp4 and embedded it in the coding. And now I think I can just open the website and listen to music without WiFi.
u are cancer smart sir
The video wont play when you go offline lol
@@psychicguide8900 if he converted it so MP4 though, he has saved on his comps no? so wouldnt need wifi, I may be wrong
THANK YOU SO MUCH, YOU HELPED ME WITH MY COURSE WORK 🥺🤩🤩🤩🤩🤩🤩🤩
Wow thanks a lot
That helped make my music video page use responsive design. Thanks.
You can also place the video/audio links in an array. Check "custom html5 playlist cast roku".
Thank you very much. I needed this. However, this presented an issue. There was too much space beneath the video. The way I solved it was by putting in videowrapper and the margin-bottom - (minus) whatever pixels I need. Worked like a charm. Thank you once more for the tutorial!
Thank you - love your videos !!!
Super tutorial - tnx.
good
Well done
Thanks a lot man
Another great tutorial. Many thanks. This was really helpful as inserting videos into websites can be tricky. I am happy to hear that your next video is going to be on responsive design as I have some questions about using absolute values in sizing by pixels as opposed to sizing by percentage.
Thank you so much
Great video
Nice ☀️☀️
Thank you, appreciate your sharing, awesome tutorial and very well explained.
Following you from India
thanks man
Thanks
Great video mate... the most clear and well explained tutorial on youtube
bro awsome
Thank you so much! :-)
@mmtuts how did you able to get that padding values ??
QUESTION :-)
Hi Dani and thank, I tried this and gave me the same result:
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 80%;
}
.videowrapper {
position: relative;
padding-bottom: 56.25%;
}
.videowrapper {
position: absolute;
height: 100%;
width: 100%;
}
I removed from (.videowrapper) [padding-top] and [height]
and from (.videowrapper ) [left right top bottom]
The magic ratio is 56.25% :-)
My question is: if I want to embed a video with ratio 3:4, the ratio still 56.25?
Have a nice day
Thanks for this tutorial. All works great except in when viewing with Safari browser. Are there any fixes for this?
thank you
I love you!
Normally you give your wrappers margins and then inner content if need be a absolute and relative position.
Hey man, following your video tutorial to learn HTML & CSS. Love them and they are really helping me understand it.
Have a doubt:
Firstly, why did you put height=0px and isn't padding used to create that idle space where nothing can be put? Because here you've put the whole youtube video in that box.
It's because of the position:absolute, and of course the relative position of the parent tag, when you set the position to absolute the height of the parent tag does not matter and the only important thing is the actual size of the parent tag that has the relative position (even if it's created by padding and not with width and height)
How would the code look if I wanted to play multiple videos from files on my computer. Specifically, if I had a series of videos that I wanted to play one after the other, and endlessly loop.
16:57 video becomes equal to size of entire webpage instead of size of container it is inside of
bro this is 2022 l wonder if any changes of embing a TH-cam video on websites have changed to a much easier form if so can you do a video on that.
Thank you
My problem with this is I cannot use position: relative to the video wrapper, because my header menu is already set to relative to avoid my dropdown submenu from pushing the contents in the body.
I set my wrapper to have a fix height and width, and then set the iFrame height and width to both have 100%, but it's not responsive like the one you have.
hardest one till now
Hello! Your tutorials have been great so far. I have learnt a lot. However, the video integrated fine but the sound isn't coming out. How do I correct this please?
How do we use the embed tag and when should we use it instead of ?
Can I use a video as a background using code?
#Thanks Brother
Why does the bottom padding of the videowrapper determine the height of div, and what does the 25 px top padding do?
I'm wondering this too. And why is height 0px?
Sir can we add an autoplay tag inside element?
how i can redirect my embed youtube video to youtube app on mobile
goin to subscribe now...
why you used 1000px instead of max-width 960px width 96% inside class wrapper ?
Pls which editor do you use ?
gv) (great video)
thank you man!!!
My browser is supposedly the latest one, but when I embed my video (an mp4) on my site (using the root folder on the site) only the audio plays, not the video. So then I wanted to make it use vlc player to play it because any video type should play that way...but can't quite get it right.
9:33 for vs code it is word wrap
I’d like to know what happens if I change “box-sizing“ of the videowrapper
quick question how do i embed or loke a website that has more then one video i am trying to creat a appand i want me churches vimeo page in my app but i can only do a single video do i use a embed or would i use a i
Code doubt:
I was bothered by the calculation as I did not understand the math. No blame on the video. The OP tried to explain as clearly as possible. Maybe I am just dumb.
So, I tried playing around with the css file and I happen to achieve the same by removing some of the code elements which I did not understand.:
my code:
*{
margin: 0;
padding: 0;
}
.wrapper{
border: 2px;
border-style: dotted; /* added border to avoid using INSPECT ELEMENT */
width: 70%;
margin: 20px 20px;
}
.vidwrapper{
border: 2px;
position: relative;
border-style: double; /* added border to avoid using INSPECT ELEMENT */
padding-bottom: 56.25%; /*100 divided by 56.25 gives the same ratio as 16 by 9 */
}
.vidwrapper {
position: absolute;
height: 100%;
width: 100%
}
Help needed: Would there be any scaling issue later on? Cause it seems to work for now.
Continue bro following you from Morocco
MADZ
"We had to use something called Flash"
Um... About that...
I guess we would have a problem with that nowadays... :D
Waiting for a long long vlog daniii from long time when we can see your vlog .....i really wanted to see the area where u live and lot lot more i wanted to see
PLEASE, I have a question I have a website and I want to embed a video from TH-cam but I want the embed video including the speed of the video the playback rate. Thank you :)
Hi Mmtuts, thanks for the video. Do you have any videos on how to embed a simple URL? like.. extract the meta tags and show a little preview to the link on your website, e.g. with an Image, title, and description? Thanks!!
Hello, how can I rewind by 1 second and via shortcut key with arrows but make it not mp4 and not via youtube but make it when I add a link?
Love From Pakistan
thanks mate, I have to create a website for my school project....pffff
your video is great, but one question, how can i
3:07
How to change the quality of the video (same like youtube) in html ? for example we want show video with low internet to people ? can you handle it ? or do you have any video about it ?
many thanks if you answer.
Great video! hey can you do an addon video that shows how to add text overlay over the embedded video
are images , videos in folders or files within the root folder ?
Hey Dani - Thanks for the video - I would have been lost without it. Got everything working on my pc fine, but once it is uploaded to my server - the image of the player is there, but it will not play. When I hit the refresh button the play button flashes white - then off and nothing. Any suggestions?
I am going to be uploading some videos on youtube for my piano lessons but that is going to be the free lessons.. Eventually, I would like people to come to my website to watch more videos, where they have to pay for the services... Do I need to upload the videos to an online database service? Some people mentioned about vimeo services but they are not free...
Well i use the code as per the lesson but video didnt start to play so might i have to change the browser so this code will work other wise all good if not help please
Great tuts!
I think this problem is solved in 2020 about the videos height using crome.
How to make multichoice option link on video ????