ProgramGuru

How to Embed YouTube Videos in HTML

Embedding YouTube Videos in HTML: Let the Web Play

YouTube videos bring motion, emotion, and meaning to your web pages. Whether it's a tutorial, product review, or cherry smoothie demo, embedding videos is simple with the <iframe> tag.

Basic Syntax

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

[ Embedded YouTube player appears here ]

The video is inserted directly into your page using a URL provided by YouTube's "Share → Embed" feature.

How to Get the YouTube Embed Code

  1. Go to the YouTube video you want to embed
  2. Click Share → Embed
  3. Copy the <iframe> code
  4. Paste it into your HTML where the video should appear

Customize Width and Height

The width and height attributes define the player size. You can also use percentages or CSS for responsive design.

<iframe width="100%" height="360"
  src="https://www.youtube.com/embed/cCherry123"
  title="Cherry Recipes"
  frameborder="0"
  allowfullscreen>
</iframe>

Enable Fullscreen

To allow fullscreen playback, add the allowfullscreen attribute. This lets users expand the video to fill their screen.

<iframe width="480" height="270"
  src="https://www.youtube.com/embed/apple-video456"
  title="Apple Harvest Tutorial"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Check your understanding 1

Which HTML tag is used to embed a YouTube video on a webpage?
Choose one answer. You can try again.

Answer and explanation

<iframe>

The <iframe> tag is commonly used to embed YouTube videos by specifying the video URL as the source.

Check your understanding 2

The YouTube embed URL format always starts with 'https://www.youtube.com/embed/'.
Choose one answer. You can try again.

Answer and explanation

True

YouTube videos are embedded using URLs in the format https://www.youtube.com/embed/VIDEO_ID, which allows direct video playback inside the iframe.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. width
  2. height
  3. allowfullscreen
  4. srcset
Which attributes can be used to control the size and behavior of an embedded YouTube video iframe?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

The width and height attributes define the iframe size. The allowfullscreen attribute enables fullscreen mode. srcset is not applicable for iframes.

Check your understanding 4

To enable fullscreen playback of an embedded YouTube video, which attribute must be added to the <iframe> tag?
Choose one answer. You can try again.

Answer and explanation

allowfullscreen

The allowfullscreen attribute allows users to toggle fullscreen mode when watching an embedded YouTube video.

Check your understanding 5

You can directly paste a normal YouTube video URL (e.g., https://www.youtube.com/watch?v=VIDEO_ID) into the src attribute of an iframe to embed the video.
Choose one answer. You can try again.

Answer and explanation

False

Normal YouTube URLs must be converted to the embed format https://www.youtube.com/embed/VIDEO_ID for proper embedding in an iframe.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. Using CSS to make the iframe width 100%
  2. Setting fixed pixel width and height attributes
  3. Wrapping iframe in a container with relative positioning
  4. Adding the allowfullscreen attribute
Which of the following practices improve embedding YouTube videos responsively on a webpage?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 3 and 4

Responsive embedding involves making the iframe width flexible (100%), using containers with relative positioning to maintain aspect ratio, and allowing fullscreen. Fixed sizes reduce responsiveness.