How to Embed YouTube Videos using iframe in HTML

Updated onbyAlan Morel
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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 Sabe.io. All rights reserved. Made with ❤ in NY.