W3docs
en
Log in

HTML YouTube Videos

Learn how to embed YouTube videos with the <iframe> element: the embed URL, responsive sizing, the allow attribute, autoplay, loop, and privacy mode.

Hosting and serving video yourself is hard: you have to encode multiple formats so every browser can play them, store large files, and pay for the bandwidth. The simpler approach is to let YouTube do all of that and embed its player on your page with an <iframe> element. The browser loads YouTube's player inside the frame, so a few lines of HTML give you adaptive streaming, captions, and fullscreen for free.

This page covers how to build the embed URL, make the player responsive, configure permissions with the allow attribute, and pass playback parameters such as autoplay, loop, and controls.

Finding the Video ID and the Embed URL

The single most common mistake is putting the watch URL into the src. The address you see in the browser when watching a video on YouTube is a watch URL and it cannot be embedded directly:

https://www.youtube.com/watch?v=i8n1gSw_o_8

The part after v= is the video ID (i8n1gSw_o_8 above). For embedding you need the embed URL, which uses the /embed/ path followed by that ID:

https://www.youtube.com/embed/i8n1gSw_o_8

So to find the ID: open the video on YouTube, copy the value of the v query parameter from the address bar (or use the Share → Embed option, which gives you the full /embed/ URL and <iframe> markup). Shortened share links such as https://youtu.be/i8n1gSw_o_8 also expose the ID as the last path segment.

Playing a YouTube Video in HTML

To embed a video, point the iframe's src at the embed URL and set its dimensions:

  1. Note the video ID (see above).
  2. Add an <iframe> element to your page.
  3. Make the src attribute the embed URL: https://www.youtube.com/embed/VIDEO_ID.
  4. Set width and height (or size it with CSS — see Responsive Embeds).
  5. Add a title attribute describing the video for accessibility.
  6. Append URL parameters to customize playback (e.g., ?rel=0 to limit recommended videos shown after playback to the same channel).

Example of playing a YouTube video in HTML with the <iframe> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
  </body>
</html>
Try it Yourself »

Privacy-Enhanced Mode (youtube-nocookie.com)

A standard YouTube embed may set tracking cookies as soon as the page loads — before the visitor even presses play. Under GDPR and similar regulations that can require explicit consent. YouTube offers a privacy-enhanced mode that delays storing personally identifiable cookies until the visitor actually starts watching. To use it, swap the host for youtube-nocookie.com:

<iframe width="560" height="315" title="YouTube video player"
  src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
  allow="autoplay; fullscreen"></iframe>

Everything else — the /embed/ path, the video ID, and all URL parameters — works exactly the same. Note that this reduces, but does not entirely eliminate, data the player may send, so review your consent policy if you have strict requirements.

The allow Attribute

Browsers gate powerful features behind Permissions Policy. For a YouTube iframe to use autoplay, fullscreen, and other capabilities, the parent page must grant them through the iframe's allow attribute. The attribute takes a semicolon-separated list of permission tokens. The set YouTube's own Share → Embed dialog generates is:

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

Common tokens and what they enable:

TokenPurpose
accelerometerLets the player read device motion (used by some 360°/VR videos).
autoplayAllows the video to start playing without a user gesture.
clipboard-writeLets the player copy text (e.g. share links) to the clipboard.
encrypted-mediaEnables DRM-protected playback via Encrypted Media Extensions.
gyroscopeLets the player read device orientation (360°/VR videos).
picture-in-pictureAllows the video to pop out into a floating window.
web-shareLets the player open the native share dialog.

The separate allowfullscreen attribute permits the fullscreen button. You can omit tokens you do not need; leaving out autoplay, for example, simply means autoplay will be blocked.

Responsive YouTube Embeds

An iframe with fixed width/height will not adapt to small screens and may overflow its container. Two reliable techniques make the player scale to its parent while keeping the 16:9 video proportions.

With the CSS aspect-ratio property (modern browsers)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .video {
        width: 100%;
        max-width: 720px;
      }
      .video iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div class="video">
      <iframe title="YouTube video player"
        src="https://www.youtube.com/embed/i8n1gSw_o_8"
        allow="autoplay; fullscreen"></iframe>
    </div>
  </body>
</html>

With the padding-bottom hack (broad support)

For older browsers that lack aspect-ratio, wrap the iframe in a container whose height is created by padding-bottom: 56.25% (that is 9 ÷ 16, the 16:9 ratio), then stretch the iframe to fill it absolutely:

<style>
  .video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
  }
  .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
<div class="video-wrap">
  <iframe title="YouTube video player"
    src="https://www.youtube.com/embed/i8n1gSw_o_8"
    allow="autoplay; fullscreen"></iframe>
</div>

Customizing Playback with URL Parameters

You configure the player by appending query parameters to the embed URL. The first parameter is introduced with a ?, and each additional parameter is joined with &:

https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0

Most parameters take a value of 0 (off) or 1 (on). The sections below cover the ones you will reach for most often.

YouTube Autoplay

To start the video automatically when the player loads, add autoplay=1 (the default, autoplay=0, waits for the user to press play).

Important: browsers block autoplay with sound. An autoplaying video must also be muted, so pair autoplay=1 with mute=1 — otherwise the video will not start. The iframe must also be granted the autoplay permission in its allow attribute.

Example of YouTube autoplay:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
  </body>
</html>
Try it Yourself »

YouTube Controls

The controls parameter toggles the player's control bar (play/pause, volume, fullscreen, and so on). Use controls=0 to hide it and controls=1 (the default) to show it.

Example of YouTube controls:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
  </body>
</html>
Try it Yourself »

YouTube Loop

Use loop=1 to make the video repeat endlessly (the default, loop=0, plays it once). There is one catch: for a single video, looping only works if you also pass playlist with the same video ID. YouTube treats a loop as "go back to the start of the playlist," so without that playlist entry the video stops after one play. The example below sets both:

Example of YouTube loop:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
  </body>
</html>
Try it Yourself »

Legacy: the <embed> and <object> tags

You may still come across older tutorials that embed YouTube with the <embed> or <object> elements. Do not use these for YouTube — the modern, supported method is the <iframe> shown above. The examples below are kept only so you can recognize the legacy pattern:

<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />

<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>

Practice

Practice
Which HTML tag is used to embed YouTube videos into a web page?
Which HTML tag is used to embed YouTube videos into a web page?
Practice
An autoplaying YouTube embed will not start unless you also add which parameter?
An autoplaying YouTube embed will not start unless you also add which parameter?
Practice
Which host enables YouTube's privacy-enhanced (cookieless until play) mode?
Which host enables YouTube's privacy-enhanced (cookieless until play) mode?
Was this page helpful?