Embedding YouTube Videos in HTML

You can embed a YouTube video into a webpage using the <iframe> tag.


Basic Syntax

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

Replace VIDEO_ID with the actual ID of the YouTube video (found in the video URL after v=).


Example with Options

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

Common Parameters

Parameter Description
autoplay=1 Auto-plays the video (requires mute=1 on most browsers)
mute=1 Mutes the video (needed for autoplay)
controls=0 Hides player controls
loop=1 Loops the video continuously
start=30 Starts the video at 30 seconds
rel=0 Hides related videos when playback ends

Responsive YouTube Embed

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Best Practices

  • Use responsive design techniques (like the aspect ratio method shown above)
  • Always include the title attribute for accessibility
  • Avoid autoplay unless muted (required by many browsers)
  • Embed videos from trusted sources only
  • Check YouTube's terms of use for embedding
  • Consider using loading="lazy" for below-the-fold videos
  • Monitor performance impact of multiple embedded videos
  • Provide fallback content for users with disabled JavaScript

Privacy-Enhanced Mode

For better privacy (prevents YouTube from storing visitor information unless they play the video):

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