How to Embed YouTube Videos using iframe in HTML
Table of Contents
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:
BASHhttps://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:
BASHhttps://www.youtube.com/embed/[ID HERE]
The final URL will look like this:
BASHhttps://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.
HTML<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.
HTML<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.
HTML<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.
HTML<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
.
HTML<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!
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- Best Visual Studio Code Extensions for 2022
- How to build a Discord bot using TypeScript
- How to deploy a PHP app using Docker
- How to deploy a Deno app using Docker
- Getting Started with Deno
- How to Scrape the Web using Node.js and Puppeteer
- Getting User Location using JavaScript's Geolocation API
- How To Create a Modal Popup Box with CSS and JavaScript
- Getting Started with Moon.js