How to Embed YouTube Videos using iframe in HTML

YouTube is the world's most popular video sharing website.

As such, there is always a need to take a YouTube video and embed it on a website.

In this post, we'll learn how you can embed a YouTube video on your site using the <iframe> tag in HTML.

How to Embed a YouTube Video

To embed a YouTube video, you need to get the video's ID. The video ID is the part of the URL that comes after the v= parameter.

Let's say this is the URL of the video you want to embed:

	https://www.youtube.com/watch?v=q4DF3j4saCE

The video ID is q4DF3j4saCE.

With this ID, you can now append it to the following URL to embed the video:

	https://www.youtube.com/embed/[ID HERE]

The final URL will look like this:

	https://www.youtube.com/embed/q4DF3j4saCE

With this URL, you can now embed the video on your site using the <iframe> tag, along with the width and height attributes.

	<iframe
    width="1920"
    height="1080"
    src="https://www.youtube.com/embed/q4DF3j4saCE"
    allowfullscreen
>
</iframe>

How to Auto-Play an embedded YouTube Video

To auto-play an embedded YouTube video, you need to add the autoplay query parameter to the URL.

	<iframe
    width="1920"
    height="1080"
    src="https://www.youtube.com/embed/q4DF3j4saCE?autoplay=1"
    allowfullscreen
>
</iframe>

How to Mute an embedded YouTube Video

To mute an embedded YouTube video, you need to add the mute query parameter to the URL.

	<iframe
    width="1920"
    height="1080"
    src="https://www.youtube.com/embed/q4DF3j4saCE?mute=1"
    allowfullscreen
>
</iframe>

How to Loop an embedded YouTube Video

To loop an embedded YouTube video, you need to add the loop query parameter to the URL.

	<iframe
    width="1920"
    height="1080"
    src="https://www.youtube.com/embed/q4DF3j4saCE?loop=1"
    allowfullscreen
>
</iframe>

How to Hide the YouTube Video Controls

To hide the YouTube video controls, you need to add the controls query parameter to the URL and set it to 0.

	<iframe
    width="1920"
    height="1080"
    src="https://www.youtube.com/embed/q4DF3j4saCE?controls=0"
    allowfullscreen
>
</iframe>

Conclusion

In this post, we learned how to embed a YouTube video on a website using the <iframe> tag in HTML.

Simply get the video ID from the URL, append it to the embed URL, and add the width and height attributes to the <iframe> tag and you're good to go.

Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!