How To Embed YouTube Video In HTML

Last Updated : Mar 11, 2024

IN - HTML | Written & Updated By - Amruta

in this tutorial we will show you how to embed YouTube video in HTML, there are several ways of embedding a video from you tube in a website. HTML tags like embed, iframe and object are used for embedding videos in HTML documents from YouTube.

If we embed a video from you tube then we have not face any problem regarding extensions of videos.

Step By Step Guide On How To Embed YouTube Video In HTML :-

1. Using iframe tag:

The first way would be using the iframe tag. As, iframe tag is a paired tag so it must have a closing tag. Here, is an example of using iframe tag with the help of html codes to understand how it work, i.e.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<iframe src="link*of*video*from*you*tube" frameborder="0" width="400px" height="500px">
        </iframe>
          </body>
      </html>

First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
Secondly, the <html> tag is used to indicate the beginning of an HTML document.
As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
Now, we use iframe tag which we use to embed video from you tube. There are some steps which we have to follow:
Create an iframe tag in your code and in src attribute write or paste you video id link or code. Now, give height and width to your iframe tag to give dimensions to your video.
At last, by closing your iframe tag, you are now able to run code on browser.
At last, the <body> and <html> tags are closed with </body> and </html> respectively.

2. By using object tag:

The object tag is also helpful for embedding a video in webpage from you tube. Object tag is similar to iframe but in we have to use data attribute instead of src, which we use in iframe.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<object data="*you*tube*video*link*" width="500px" height="500px"></object>
          </body>
      </html>

First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
Secondly, the <html> tag is used to indicate the beginning of an HTML document.
As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
<body> tag is used to define the webpage body. All the contents to show on website are written here. Now, we use object tag which we use to embed video from you tube. There are some steps which we have to follow:
Create an object tag in your code and in data attribute write or paste you video id link or code. Now, give height and width to your object tag to give dimensions to your video.
At last, by closing your object tag, you are now able to run code on browser.
At last, the <body> and <html> tags are closed with </body> and </html> respectively.

3. By using embed tag

We can also use embed tag to embedding a video from you tube in webpage. Embed tag is also similar to iframe, but we use embed instead of iframe.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<embed data="*you*tube*video*link*" width="500px" height="500px"></embed>
          </body>
      </html>

First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
Secondly, the <html> tag is used to indicate the beginning of an HTML document.
As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
<body> tag is used to define the webpage body. All the contents to show on website are written here. Now, we use embed tag which we use to embed video from you tube. There are some steps which we have to follow:
Create an embed tag in your code and in src attribute write or paste you video id link or code. Now, give height and width to your embed tag to give dimensions to your video.
At last, by closing your embed tag, you are now able to run code on browser.
At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, we can say that we can use three tags that are iframe, object and embed for embedding a video from you tube.

Iframe is the most preferred tag from our side and widely used other tags. Src, height and width attribute must be used in these tags to provide video and its dimensions. I hope this tutorial on how to embed YouTube video in HTML helps you.

About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪