How to Embed a YouTube Video in HTML

Use an <iframe> when you want to show a YouTube video directly on your page without hosting the video file yourself. This works well for tutorials, interviews, product walkthroughs, and course previews.

What you’ll build or solve

You’ll learn how to embed a YouTube video in HTML using the embed URL inside an <iframe>. You’ll also know how to set the size and make playback work smoothly.

When this approach works best

This approach is the right choice when the video already lives on YouTube and you want visitors to watch it without leaving your page.

Common real-world scenarios include:

• Course teaser videos
• Founder interviews
• Tutorial walkthroughs
• Product demos
• Webinar replays

This is a bad idea when you need full control over branding, playback behavior, or private hosting. In that case, use the HTML <video> tag with your own file.

Prerequisites

You only need:

• A basic HTML file
• A YouTube video URL
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the YouTube embed URL inside an <iframe>

Use the YouTube embed link, not the normal watch-page link.

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

To change the video size, update the width and height values.

<iframe
  width="800"
  height="450"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Product demo"
  allowfullscreen>
</iframe>

What to look for:

• Use /embed/VIDEO_ID, not watch?v=
• width and height control the frame size
• allowfullscreen lets users expand the video
• Keep the video ID exact
• Copy the embed code from YouTube’s Share → Embed option for the fastest path

Examples you can copy

Course preview

<iframe
  width="700"
  height="394"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Course preview"
  allowfullscreen>
</iframe>

Product walkthrough

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Product walkthrough"
  allowfullscreen>
</iframe>

Webinar replay

<iframe
  width="800"
  height="450"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Webinar replay"
  allowfullscreen>
</iframe>

Common mistakes and how to fix them

Mistake 1: Using the normal YouTube watch URL

What the reader might do:

<iframe
  src="https://www.youtube.com/watch?v=VIDEO_ID">
</iframe>

Why it breaks: the watch-page URL is not the correct iframe format, so the video may not render properly.

Corrected approach:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

Mistake 2: Forgetting allowfullscreen

What the reader might do:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Why it breaks: users cannot expand the video to full screen.

Corrected approach:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

Mistake 3: Leaving out width and height

What the reader might do:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

Why it breaks: the iframe may render with awkward or inconsistent default sizing.

Corrected approach:

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

Troubleshooting

If the video does not load, confirm the URL uses /embed/VIDEO_ID.

If the frame size looks wrong, adjust width and height.

If users cannot expand the video, add allowfullscreen.

If the wrong video appears, double-check the video ID in the URL.

Quick recap

• Use <iframe> to embed YouTube videos
• Use the /embed/VIDEO_ID URL format
• Set width and height
• Add allowfullscreen
• Copy the embed code from YouTube for the easiest setup