How to Embed YouTube Video in HTML?

In today's time, videos are a great tool to reach the audience. It has higher retention than a written form of content and is widely accepted & consumed.

Also, web pages with videos and other media have a higher ranking in search engines compared to others.

But, adding youtube videos in HTML can be a bit overwhelming because of <iframe> tags and control systems to manage features like autoplay, auto mute...etc.

So, in this post, we will learn how to Embed YouTube videos in HTML using two methods <iframe> and <object>. We will also learn how to customise the embed code to add additional features.

Embed YouTube videos in HTML - Easy method

The easiest method to embed a YouTube video in HTML is simply by copying the embed code and putting it in the .html file.

Here is how to do it:

• First, go to the video you want to embed. Click on the Share icon.

• You will find an option named Embed.

  

• Click on Embed and you will get a <iframe> code to embed that video in HTML. Like this:

  <iframe
    width="560px"
    height="315px"
    src="https://www.youtube.com/embed/kJQP7kiw5Fk"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media;"
    allowfullscreen
  ></iframe>
  

• Now, click on copy button to copy the whole code.

  

• Now, add the code to your HTML file.

Voila! you did it.

Add YouTube video in HTML - Manual method

If you want to add YouTube videos with more control and customization, then adding them manually is the best way to do it.

1. Add YouTube videos using <iframe> tag

In HTML, videos are added using the <iframe> tag. It has other various attributes like src for the source, and height & width for managing dimensions.

Here is a simple code to add a YouTube video:

<iframe
  src="https://www.youtube.com/embed/video_id"
  width="560px"
  height="315px"
  allowfullscreen
></iframe>

Replace video_id with 11 digits YouTube video id, which you find in the YouTube video link. Usually, it starts after /watch?v=.

Example video link: https://www.youtube.com/watch?v=kJQP7kiw5Fk.

In the above video link, the video_id would be kJQP7kiw5Fk.

That's it!

2. Add YouTube videos using <object> tag

<object> tag is another way of embedding external content in our HTML file. Though, it is not as popular and as flexible as <iframe> is, it is more secure than <iframe>.

Also, <object> is not supported by a few browsers. Also, it supports the embedding of very few types of content in HTML.

But, you can embed a YouTube video using <object>.

<object
  data="https://www.youtube.com/embed/video_id"
  width="560px"
  height="315px"
  allowfullscreen
></object>

Replace the video_id with a real 11-digits YouTube video id same as <iframe> one.

Customization in Embedding videos:

The embedded YouTube video can be customized to add other functionalities like auto-playing the video, removing the control system, automatically muting/unmuting the videos, and disallowing users to view the videos in full screen.

The same customization will work with both tags: <iframe> and <object>

Here are some of the customization done with embedded YouTube videos.

1. How to autoplay an embedded video in HTML?

Embed video can be made to autoplay.

Just add ?autoplay=1&mute=1 after video_id in the YouTube video link.

<iframe
  src="https://www.youtube.com/embed/video_id?autoplay=1&mute=1"
  width="560px"
  height="315px"
  allowfullscreen
></iframe>

By default, YouTube 'autoplay' videos must be muted (mute=1, added using &). If you remove the mute params or set it to 0, the video won't be auto-played.

2. How to add/remove control buttons?

Control buttons are specialized buttons to manage the video, audio, quality, fast-forward, backwards ...etc.

Though, it is not advisable to remove the control setting of a video. But, it can be done if needed. Just add ?controls=0 after video_id in the YouTube video link.

<iframe
  src="https://www.youtube.com/embed/video_id?controls=0"
  width="560px"
  height="315px"
  allowfullscreen
></iframe>

Final note:

We have reached the end of the Blog on YouTube video embedding in HTML. We hope this guide has helped you to add the magic of videos to your web content.

You have learnt how to embed YouTube videos using <iframe> or <object> tag. Also, we discussed little customization to add more functionalities like autoplay or control systems in our embedded videos.

You these techniques into your codes/project. You can copy and use the code provided above. Just remember to replace video_id with real video id.

Happy coding!