Embedding YouTube Videos in HTML
Using iframe Tag

Media Elements

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>

Example: Fruit Video Gallery

<h3>Watch: Banana Slicing Tips</h3>
<iframe width="400" height="225"
  src="https://www.youtube.com/embed/banana123"
  title="Banana Tips"
  allowfullscreen>
</iframe>

<h3>Watch: Cherry Pie Secrets</h3>
<iframe width="400" height="225"
  src="https://www.youtube.com/embed/cherry456"
  title="Cherry Pie Video"
  allowfullscreen>
</iframe>

QUIZ

Question 1:Which HTML tag is used to embed a YouTube video on a webpage?