HTML YouTube Embed

The easiest way to play a video on your web page is to use a YouTube-hosted video. YouTube allows you to embed any public video on your website using a simple <iframe> tag.

---

Why Embed YouTube Videos?

Using YouTube to host your videos has several advantages:

• No server storage or bandwidth cost for the video file
• YouTube handles encoding for different resolutions and devices
• Works on all browsers without needing fallback formats
• Built-in player with controls, fullscreen, and captions

---

Basic YouTube Embed

To embed a YouTube video, use the <iframe> element with the YouTube embed URL:

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    allowfullscreen>
</iframe>

---

How to Get the Embed URL

There are two ways to get the embed URL for a YouTube video:

Method 1 — From the Video URL

Take a regular YouTube video URL like:

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

Replace watch?v= with embed/:

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

Method 2 — YouTube Share Embed

On any YouTube video, click Share → Embed. YouTube will generate the complete <iframe> code for you to copy and paste.

---

YouTube Embed Parameters

You can add parameters to the embed URL to control playback behaviour. Parameters are added after a ? and separated by &:

Parameter	Values	Description
autoplay	0 / 1	Automatically start playing when the page loads (requires mute=1)
mute	0 / 1	Start the video muted
loop	0 / 1	Loop the video repeatedly (also requires playlist=VIDEO_ID)
controls	0 / 1	Show or hide the player controls
start	seconds	Start playback at a specific time (e.g. start=30)
end	seconds	Stop playback at a specific time
rel	0 / 1	Show related videos after playback ends (0 = disable)

---

Autoplay Example

To autoplay a YouTube video (silently), add autoplay=1&mute=1:

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1"
    title="YouTube video player"
    allowfullscreen>
</iframe>

---

Loop Example

To loop a YouTube video, add both loop=1 and playlist=VIDEO_ID:

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ?loop=1&playlist=dQw4w9WgXcQ"
    title="YouTube video player"
    allowfullscreen>
</iframe>

---

Responsive YouTube Embed

By default, the <iframe> has a fixed size. To make it responsive (fluid width), use CSS:

<style>
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="video-wrapper">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video player"
        allowfullscreen>
    </iframe>
</div>