HTML YouTube Video, Embed YouTube Video in HTML
HTML TUTORIAL NO: 16
HTML YouTube Video
With the using of HTML Iframe (Inline Frame) element we can easily embed YouTube Video in our websites and webpages.
Why we Embed YouTube Video in Website?
Because when we are hosting a website in a hosting company that allow a bit storage for video and our video is long and large size and we want upload a high-quality video, but we can’t. The solution is easy we first upload video in your YouTube channel and then embed YouTube Video in your websites.
Just Follow The Simple Step to Embed YouTube video
- First create a YouTube channel.
- Upload the video that you need to add to our website.
- Then embed the YouTube video on your website.
How to Embed YouTube Video
- First open YouTube video you want to embed.
- Click share on video.
- Then click Embed.
- Copy the HTML code appears here.
- Then paste the code to your Website HTML code section.
Example to Embed YouTube Video with Video URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML YouTube Video</title>
<body>
<iframe
src=https://www.youtube.com/embed/
pWvCZkNXd54
height="150"
width="250"frameholder="2"></iframe>
</body>
</html>
|
Output of above Example
 |
Example to Allow Full Screen Mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML YouTube Video</title>
<body>
<iframe width="250" height="150"
src="https://www.youtube.com/embed/
pWvCZkNXd54"
frameborder="0"allowfullscreen></iframe>
</body>
</html>
|
Example of Starting Video at a Certain Time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML YouTube Video</title>
<body>
<iframe width="250" height="150"
src=https://www.youtube.com/embed/
pWvCZkNXd54?start=40
frameborder="0"allowfullscreen></iframe>
</body>
</html>
|
Output of above Example
 |
Example of Hiding Video Information
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML YouTube Video</title> <body> <iframe width="250" height="150" src="https://www.youtube.com/embed /pWvCZkNXd54? showinfo=0" frameborder="0" allowfullscreen></iframe> </body> </html> |
In this tutorial we learned how to embed YouTube video in our website, simply using the Iframe tag, through the using of Iframe in HTML we easily embed YouTube video in our webpages.
Learn Also-
- Learn HTML Audio Tag with Examples.
- Learn HTML button Full tutorial.
- HTML Dropdown List with programming examples.
- Learn HTML video tag with examples.
- Learn HTML Iframe (Inline Frame).
27 Comments
شرکت سئو سایت · February 25, 2022 at 3:05 pm
Hi there I am so happy I found your blog, I really found you by error, while I was researching on Aol for something else, Anyways I am here now
and would just like to say thank you for a marvelous post and a all round interesting blog (I
also love the theme/design), I don’t have time to go through it all at the
moment but I have bookmarked it and also included your RSS feeds, so
when I have time I will be back to read a lot more,
Please do keep up the superb job.
قیمت پرایمر فلورمار اصل · April 28, 2022 at 8:12 am
For most recent information you have to visit the web and on world-wide-web I found this website as a finest web page
for hottest updates.
ayams.com · May 10, 2022 at 11:32 am
I was recommended this blog by my cousin. I’m
not sure whether this post is written by him as nobody else know such detailed about my difficulty.
You are wonderful! Thanks!
ساخت وب سایت بهینه سازی شده · July 24, 2022 at 1:02 pm
Excellent post but I was wondering if you could write a
litte more on this subject? I’d be very grateful if you could
elaborate a little bit more. Thanks!
سفارش طراحی سایت اختصاصی · July 26, 2022 at 5:12 am
Hey there would you mind stating which blog platform you’re using?
I’m planning to start my own blog in the near future but
I’m having a difficult time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your layout seems different then most
blogs and I’m looking for something unique.
P.S Apologies for getting off-topic but I had to ask!
Uday · July 26, 2022 at 5:49 am
Use WordPress, it is better than blog.
ثبت شرکت فوری در تهران · August 6, 2022 at 1:46 am
Thanks for ones marvelous posting! I definitely enjoyed reading it, you may be a great author.
I will make certain to bookmark your blog and definitely will come back
later on. I want to encourage that you continue your great
writing, have a nice afternoon!
سئو سایت تضمینی · August 6, 2022 at 3:05 am
Undeniably believe that which you stated. Your favorite
justification seemed to be on the internet the easiest thing to be aware of.
I say to you, I certainly get annoyed while people think about worries that they just don’t know about.
You managed to hit the nail upon the top as well as defined out the whole thing without having side-effects
, people can take a signal. Will probably be back to get more.
Thanks
ژل ابرو طبیعی با لیفت قوی · August 12, 2022 at 10:16 am
Hello would you mind letting me know which hosting company you’re
using? I’ve loaded your blog in 3 different internet browsers and I must say this
blog loads a lot quicker then most. Can you suggest a good internet
hosting provider at a fair price? Thanks a lot,
I appreciate it!
cp کالاف دیوتی · August 18, 2022 at 1:08 pm
It’s difficult to find educated people in this particular topic,
however, you seem like you know what you’re talking
about! Thanks
Earnestine · August 21, 2022 at 2:13 pm
I’m very happy to find this website. I want
to to thank you for your time for this particularly fantastic read!!
I definitely really liked every bit of it and
I have you book-marked to see new information on your site.
karetehran.ir · September 3, 2022 at 1:57 am
When someone writes an piece of writing he/she retains
the thought of a user in his/her mind that how a user can understand it.
Thus that’s why this post is perfect. Thanks!
ایجاد سایت و فروشگاه اینترنتی · September 6, 2022 at 4:46 pm
Greate article. Keep posting such kind of information on your site.
Im really impressed by it.
Hello there, You’ve done an excellent job.
I’ll certainly digg it and personally recommend to my friends.
I am sure they will be benefited from this web site.
سفارش طراحی سایت اختصاصی · September 10, 2022 at 8:04 am
My developer is trying to convince me to move to .net from
PHP. I have always disliked the idea because of the expenses.
But he’s tryiong none the less. I’ve been using
Movable-type on numerous websites for about a year and am anxious about switching to another platform.
I have heard excellent things about blogengine.net. Is
there a way I can transfer all my wordpress posts into it?
Any kind of help would be really appreciated!
Eddy Simmering · September 15, 2022 at 10:11 am
Looking deliver to reading more. good article post.Really thank you! Awesome.
Jamal Manus · October 26, 2022 at 11:53 am
Wow, marvelous blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is wonderful, let alone the content!
happyliving.ir · December 20, 2022 at 5:56 am
Hey I know this is off topic but I was wondering if you knew of any widgets
I could add to my blog that automatically tweet my newest twitter updates.
I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
Please let me know if you run into anything. I truly enjoy reading
your blog and I look forward to your new updates.
happyliving.ir · December 31, 2022 at 9:47 pm
My spouse and I stumbled over here different website and thought I should check things
out. I like what I see so i am just following you. Look
forward to finding out about your web page repeatedly.
Jerri · February 9, 2023 at 6:04 am
Ⴝome timees its a pain in the ɑss tto read what peoiple wrote but
this weebsite is very user pleasant!
www.youtube.com · April 18, 2023 at 3:28 am
I’m not sure where you’re getting your information, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for magnificent information I was looking
for this information for my mission.
پامر روباهی · April 23, 2023 at 3:20 am
I read this article completely about the comparison of most recent and earlier technologies, it’s amazing
article.
آگهیهای استخدام های کرج · April 30, 2023 at 2:27 am
Hi there, just became aware of your blog through Google, and found that it’s truly
informative. I’m going to watch out for brussels. I’ll appreciate if you continue this
in future. Numerous people will be benefited from your writing.
Cheers!
خرید فالوور با تخفیف · May 12, 2023 at 6:50 am
Why viewers still make use of to read news papers when in this technological globe the whole thing is existing on web?
سگ خانگی · October 27, 2023 at 7:16 pm
Why users still make use of to read news papers when in this technological globe everything is accessible on web?
denizpet.ir · November 1, 2023 at 5:29 pm
Hello! Do you know if they make any plugins to protect against hackers?
I’m kinda paranoid about losing everything I’ve worked
hard on. Any recommendations?
denizpet.ir · February 3, 2024 at 6:02 pm
It’s hard to come by knowledgeable people in this particular subject, but you
sound like you know what you’re talking about!
Thanks
سئو سایت قیمت · February 11, 2024 at 12:33 am
Hi there, all the time i used to check web site posts here early in the morning,
for the reason that i enjoy to gain knowledge of more and
more.