How To Embed A YouTube Video In HTML? Full Guide

In this article, we will learn how to Embed a YouTube video in HTML and how to do it using specific methods.

There are three ways to answer the question “How to Embed a YouTube video in HTML”: 

1. Using the iFrame tag
2. Using the Object tag
3. Using the Embed tag

There are various HTML tags and attributes, but we will discuss these methods in detail and find out how to add a YouTube video in HTML.

See Also: 7 HTML CSS Projects For Beginners To Start Web Development

3 Ways to Embed a YouTube Video in HTML

Let’s discuss in detail how to insert a youtube video in HTML.

Method 1: Use the iFrame tag

Before you use the iFrame tag, you should know how to get Embed code from YouTube. The steps are:

1. Suppose you want to add a video, for example, the best Java tutorial on YouTube. Go to www.youtube.com and search for the video you want to insert in your HTML file.
2. Click on the share option of your preferred video. You will get an Embed option.
3. Click the Embed option, copy the code with an iFrame tag, and paste it into your HTML file. Example of iFrame tag:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/HFTvaOjWk2c?si=6Y1WeIRS331LLpRp” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen></iframe>

We can also edit the code above in the HTML file. For instance, you can edit the width and height of the video and set its value. Furthermore, you can also allow autoplay, full-screen, picture-in-picture, and mute the video by editing the code. This is another solution on how to Embed a YouTube video in HTML.   

Another way is to copy the URL and use the src attribute. For instance:

iFrame   

src=”Url of Youtube Video” height=”400″ width=”500″ >   

</iframe>   

You can also edit the height and width in this code and allow the autoplay, full-screen, picture-in-picture, and mute the video. So, this is another solution on how to embed a YouTube video in HTML. 

See Also: Unminifying HTML: Decoding And Understanding Web Code

Method 2: Use Object tag

This is another way how to put a YouTube video in HTML. You can use a <object> tag. An Object tag is used as a data attribute for external resources. It can be a URL, a picture, or a YouTube video. For instance:

<object data=”https://www.youtube.com/embed/aFnXjlkPwfc” height=”300px” width=”450″ allowfullscreen></object>

In the above code, we can see the Object tag. To add a YouTube video to your HTML file, you must paste the video URL in the data attribute, and you are all set. You can also edit height and width, allow autoplay, full-screen, and picture-in-picture, and mute the video. Now you know how to include youtube video in HTML. 

See Also: Display Time In HTML Using JavaScript: A Simple Guide

Method 3: Use the Embed tag

It is one of those tags that are not used often these days but can be a way to insert a YouTube in HTML. It is similar to an Object tag. For instance :

<embed width=”480″ height=”500″

src=”https://www.youtube.com/embed/il_t1WVLNxk“>

You can also add a title, height, and width for the video. In the Embed tag, it is better to specify the type of content. For instance:

<embed

  type= “video/quicktime”

  src= “movie.mov”

  width= “640”

  height= “480”

  title= “Title of my video”/>

We can see in the above code how the type of content is provided within the Embed tag.  

See Also: Current Time In HTML: Displaying Real-Time Data On Web Pages

FAQs

How do I align a YouTube in HTML?

You can use a tag to align a YouTube video in HTML. Another way to align the video would be to create a and use the attribute text-align.

How do you loop embedded YouTube videos in HTML?

To loop the embedded YouTube videos in HTML, you must modify the link. Go to the link, add a '&' and write: 'loop=1'. We must remember that '&' is not a non-breaking hyphen in HTML. It is used to start it and then is followed by a code.

How do I Embed a YouTube video in HTML without controls?

To Embed the YouTube videos in HTML without controls, you must modify the link. Go to the link, add a '&' and write: 'controls=0'

How do you Embed YouTube videos in HTML without the YouTube logo?

To Embed the YouTube videos in HTML without the YouTube logo, modify the link. Go to the link, add a '&' and write: 'modestbranding=0'

Conclusion

In conclusion, we now know how to Embed a YouTube video in HTML. The above three ways are the only ones that you need. However, these days, Object and embedded tags are not used. The iFrame tag is easy to use and edit in case of adding a YouTube video. You can also practice various HTML tag lists with examples through which you can do new things like showing the current time in HTML, making a color picker, and a lot more. 

See Also: How To Create A Calendar In HTML Using JavaScript