HTML YouTube Videos

HTML YouTube videos allow you to display videos from YouTube directly on your website. Instead of uploading large video files to your own server, you can embed a YouTube video and let visitors watch it without leaving your page.

HTML uses the <iframe> element to embed YouTube videos. This is useful for educational websites, tutorials, product demonstrations, blogs, and online courses.

What Is a YouTube Video Embed in HTML?

Embedding a YouTube video means displaying a video player from YouTube inside your web page. Visitors can watch the video using the embedded player.

Here is a basic example:

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

Replace VIDEO_ID with the actual ID of the YouTube video you want to display.

For example, if the video URL is https://www.youtube.com/watch?v=abc123xyz, the video ID is abc123xyz, so the embed URL becomes https://www.youtube.com/embed/abc123xyz.

You can learn more about embedded content in our HTML Media tutorial.

How to Embed a YouTube Video

Follow these steps to add a YouTube video to your HTML page.

• Open YouTube and select the video you want to embed.
• Click Share below the video.
• Select Embed.
• Copy the provided iframe code.
• Paste the code into your HTML file where you want the video to appear.

You can also write the iframe code manually using the video’s embed URL.

Complete HTML YouTube Video Example

The following example shows how to embed a YouTube video in a complete HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML YouTube Video</title>
</head>
<body>

  <h1>Watch a YouTube Video</h1>

  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
  </iframe>

</body>
</html>

Replace VIDEO_ID with a valid YouTube video ID before opening the page.

Important Attributes of the Iframe Element

The <iframe> element supports several attributes that help configure an embedded YouTube player.

Attribute	Purpose
src	Specifies the YouTube embed URL
width	Sets the player width
height	Sets the player height
title	Provides an accessible description
allow	Specifies permitted browser features
allowfullscreen	Allows fullscreen playback

The title attribute is especially useful for visitors who use assistive technologies.

Making YouTube Videos Responsive

Fixed-width videos may overflow on smaller screens. You can use CSS to make an embedded video fit its container.

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

Add the following CSS:

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

The aspect-ratio property maintains a 16:9 video shape while the player adjusts to the available width.

Best Practices for HTML YouTube Videos

Follow these practices when embedding YouTube videos:

• Use the official YouTube embed URL format.
• Replace the placeholder with a valid video ID.
• Add a descriptive title attribute.
• Make the player responsive for mobile devices.
• Avoid unnecessary autoplay, especially with sound.
• Remember that the video must be available for embedding.
• Consider privacy and performance when loading third-party content.

Embedding YouTube videos is a simple way to add multimedia to your website without hosting the entire video file yourself. For related topics, explore HTML Video and HTML Embedded Content.