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.
This information is very helpful. I think that UA-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.
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.
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:
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.
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.
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.
The most useful lesson I learned from watching the video called “How to Create HTML5 Videos and Embed Videos” on “UA-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 UA-cam or a diffent location because it will use less space and you will not need to worry about using your own hosted website.
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?
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 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.
bro this is 2022 l wonder if any changes of embing a UA-cam video on websites have changed to a much easier form if so can you do a video on that. Thank you
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)
Thank you man, for the video, I just converted a random UA-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.
My video never displays when going live no matter which mp4 video I include/embedd and no matter in which browser I open it (the video itself works fine though). I can link youtube videos but can't add one of my own videos from my pc! What am I missing? I have tried million of ways to make it happen but with no result, the video never shows
The video is not loading when I use video tag + offline video method , so far I have not tried linking video online , any fixes ? I’ve cleared my cache and searched about it on stack overflow but none of these seem to work
Hi, I wrote the code same like your's but my video not going to play. the video format is .mp4. !HTML code Front page
Your browser can't support.
!CSS code * { margin: 0; padding: 0; } .wrapper { margin: 0 auto; width: 1000px; } video { width: 100%; } Just show the vedio i am clicking but can't play, note i am using notepad ++
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
PLEASE, I have a question I have a website and I want to embed a video from UA-cam but I want the embed video including the speed of the video the playback rate. Thank you :)
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
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!!
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?
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
Shouldn't we include the .ogg source as the source of a video file? Is it required or an obsolete concept for modern browsers? Anyways, great tutorial sir....
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.
It's 2021 now, has anything changed regarding more easily embedding videos from YT, the complicated part about scaling the height according to the width?
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.
Autoplay was not working for me. After some search, I have found out that now you need to write "muted" after "autoplay" so it can automatically play. I hope this helps someone
Still having trouble understanding the difference between margin and padding along with position an floating. Also not knowing when to use them an for what purposes
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: ua-cam.com/video/v8jDnBYc0bs/v-deo.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
Thank you for taking the time to create this lesson.
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.
This information is very helpful. I think that UA-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.
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.
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:
been watching for a couple days really simple for beginners
i like your practical oriented approach and it will surely give confident to build professional website . thank you
Wow! Great explanation. Thank you.
big up man this video helped me out in 2019
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.
Thanks man, really helped my site.
Thanks for this tutorial. All works great except in when viewing with Safari browser. Are there any fixes for this?
I really enjoy learning with your video, thank you for your work!
I’d like to know what happens if I change “box-sizing“ of the videowrapper
Thanks a lot! Very clear explanation.
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.
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.
Pepole like u r really helping others learns....♥️
The most useful lesson I learned from watching the video called “How to Create HTML5 Videos and Embed Videos” on “UA-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 UA-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 for teaching me how to embeld a video in my own web site, have a nice day
why you used 1000px instead of max-width 960px width 96% inside class wrapper ?
Thanks man it was very helpful.
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?
Best Video Dani it helped me out greatly thanks!
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?
Thank you for your video! It was a much help!
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, appreciate your sharing, awesome tutorial and very well explained.
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.
Thanks for your video, it's help me lot, I was stuck at video input...😊
@mmtuts how did you able to get that padding values ??
Top notch tutorial. Thank you.
Super bro... Its worked and quite responsive too.
In fact l love your videos. Thanks so much
"We had to use something called Flash"
Um... About that...
I guess we would have a problem with that nowadays... :D
Can I use a video as a background using code?
How do we use the embed tag and when should we use it instead of ?
how i can redirect my embed youtube video to youtube app on mobile
bro this is 2022 l wonder if any changes of embing a UA-cam video on websites have changed to a much easier form if so can you do a video on that.
Thank you
Thanks a lot my bro, very helpful for me. New subs,
Thanks man. This was a well-explained video.
Great job mate, thanks.
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)
Thank you man, for the video, I just converted a random UA-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
Awesome lesson and very easy to follow along
THANK YOU SO MUCH, YOU HELPED ME WITH MY COURSE WORK 🥺🤩🤩🤩🤩🤩🤩🤩
Great video mate... the most clear and well explained tutorial on youtube
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?
Thx, your videos are awesome!
Thank you so much. You helped me a lot
Thank you - love your videos !!!
My video never displays when going live no matter which mp4 video I include/embedd and no matter in which browser I open it (the video itself works fine though). I can link youtube videos but can't add one of my own videos from my pc! What am I missing? I have tried million of ways to make it happen but with no result, the video never shows
The video is not loading when I use video tag + offline video method , so far I have not tried linking video online , any fixes ? I’ve cleared my cache and searched about it on stack overflow but none of these seem to work
Normally you give your wrappers margins and then inner content if need be a absolute and relative position.
Sir can we add an autoplay tag inside element?
Thank you so much
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".
But, why cant i insert a video?! It shows just nothing but like disabled.. please do reply to my problem here. and please reply ASAP.
16:57 video becomes equal to size of entire webpage instead of size of container it is inside of
20:03 How do you resize the window and the elements just update without releasing the mouse??? On my windows 10 I can't do that
I'm having trouble embedding a UA-cam video into mine. Will it not work if the website is offline?
Hi, I wrote the code same like your's but my video not going to play. the video format is .mp4.
!HTML code
Front page
Your browser can't support.
!CSS code
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
video {
width: 100%;
}
Just show the vedio i am clicking but can't play, note i am using notepad ++
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 a lot man
PLEASE, I have a question I have a website and I want to embed a video from UA-cam but I want the embed video including the speed of the video the playback rate. Thank you :)
I have one question!!!
How to change color of timeline in video default is blue on youtube is red pls make Tutorial for that? Answer me
Hello Dani , I am having a issue with putting my webpage inside of an and the webpage showing inside i did not upload it just want to test it
13:18 video does not move to right side using same code
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
9:33 for vs code it is word wrap
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!!
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?
thank you
why can't i put and also video tag. i tried but until i delete the video tag, my was unvisible.
super helpful - Merc
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
Wow thanks a lot
What about if we want to add 2 or more videos
Shouldn't we include the .ogg source as the source of a video file? Is it required or an obsolete concept for modern browsers? Anyways, great tutorial sir....
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.
It's 2021 now, has anything changed regarding more easily embedding videos from YT, the complicated part about scaling the height according to the width?
Thanks man
good
I'm using virtual studio code and Ive been trying to add a video by coping the embeding link but the video doesnt show up what am i doing wrong here?
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.
Sir how to stop recommended videos suggestions at end of the video
How to make multichoice option link on video ????
Wow you rock it
Autoplay was not working for me. After some search, I have found out that now you need to write "muted" after "autoplay" so it can automatically play. I hope this helps someone
Still having trouble understanding the difference between margin and padding along with position an floating. Also not knowing when to use them an for what purposes
Can you make a video player like youtube with ffmpeg?
Great video
Why is the height of the videowrapper set to 0px; doesn't that mean the video will have no height?
Super tutorial - tnx.
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
Thanks
What chrome extension do you used to update elements HTML resizing the window?