HTML — YouTube

Friendly Intro – What & Why

YouTube is the biggest video platform on the internet.
Many websites want to show a video from YouTube without asking visitors to leave the page.
HTML gives you a simple way to embed those videos.

In this lesson we’ll learn how to:

1. Add a YouTube video with the <iframe> tag.
2. Control the player with URL parameters.
3. Make the video responsive so it looks good on phones and tablets.

1. The Basic <iframe> Element

The most common way to embed a YouTube video is to use an <iframe>.
An <iframe> creates a small window that shows another web page inside your page.

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

What the browser displays

An 560‑pixel wide YouTube player with a black background and the default YouTube controls.

2. Customizing the Player with URL Parameters

YouTube lets you add parameters to the src URL to change how the video behaves.
The most common ones are:

Parameter	Value	What It Does
autoplay	1	Starts the video automatically
controls	0	Hides the default player controls
loop	1	Repeats the video forever
mute	1	Starts the video muted
rel	0	Prevents related videos from showing after playback

Good to know: Browsers block autoplay unless the video is muted.

Example: autoplay + muted + loop

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&playlist=dQw4w9WgXcQ"
  title="Autoplay video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

What the browser displays

A video that starts automatically, stays muted, and repeats forever.

3. Responsive YouTube Embeds

Fixed width and height make the video look bad on mobile.
The trick is to let the container decide the size and keep the 16:9 aspect ratio.

<style>
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    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/dQw4w9WgXcQ"
    title="Responsive video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

What the browser displays

The video stretches to fill the width of its container while keeping a 16:9 shape.

4. Adding a Caption or Description

If you want to show text below the video, simply put a paragraph after the <iframe>.

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video" frameborder="0" allowfullscreen></iframe>
</div>
<p>This video explains how to embed YouTube videos in HTML.</p>

What the browser displays

The video followed by a short description paragraph.

5. Common Mistakes & How to Avoid Them

Common mistake: Using src="https://youtube.com/embed/..." instead of the correct https://www.youtube.com/embed/....
Common mistake: Forgetting the allowfullscreen attribute so the video can’t go full screen.

Common mistakes checklist

• You used the correct domain (www.youtube.com).
• You added allowfullscreen.
• You set the allow attribute to include autoplay if you want autoplay.
• You added the playlist parameter when using loop.
• You made the embed responsive for mobile.

Mini Practice

1. Embed the video https://www.youtube.com/watch?v=3JZ_D3ELwOQ in a page.
2. Add autoplay and mute so the video starts automatically.
3. Make the embed responsive using the wrapper technique.
4. Add a short caption below the video.
5. Verify that the video can go full‑screen.

Summary

• You embed YouTube videos with the <iframe> tag.
• URL parameters let you control autoplay, controls, loop, mute, and related videos.
• Use a wrapper with CSS to make the video responsive.
• Always include allowfullscreen and the proper allow list.

Further Resources

• The official YouTube Iframe Player API documentation.
• MDN’s guide on using <iframe>.
• A tutorial on responsive videos using the padding‑bottom trick.

Tip: Keep the src URL short; you can add parameters in one line or break them with ? and &.

Bonus: Embedding a Playlist

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLynG2v9KXhF6GzYz4j0v8Y1i2k8gX5xJ9"
  title="Playlist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

What the browser displays

*A YouTube player that plays all videos in the specified playlist.