HTML YouTube

A player from another site

YouTube videos are not <video src="..."> files on your server. You embed YouTube’s player in an <iframe>. The iframe loads a page from YouTube inside yours.

That is the same iframe idea as maps or a live preview: another document, framed in your layout. You still owe the visitor a title, and you still have to stop the frame from stretching the page sideways.

The embed URL

Watch URLs look like https://www.youtube.com/watch?v=VIDEO_ID. Embed URLs use a different path:

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

Replace VIDEO_ID with the id from the watch link. The examples below usedQw4w9WgXcQ as a stand-in. Swap it for the clip you actually want.

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

Never paste the /watch?v= URL into src. The embed player only loads from /embed/.

title and allow

title describes the iframe for screen readers and browser tabs inside the frame. “YouTube video player” is a start; a short name of the clip is better.

allow lists features the embedded page may use: fullscreen, autoplay, a clipboard, and similar. YouTube’s share dialog often includes a longer allowstring. You do not need to memorize every token — copy it from YouTube, keeptitle, and add allowfullscreen if you want the player’s fullscreen button to work.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Sample clip"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

A 16:9 wrapper

Fixed width="560" overflows a phone. Wrap the iframe in a box that keeps a 16:9 ratio and let the iframe fill that box.

<style>
  .video-wrap {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
  }
  .video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Sample clip"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

aspect-ratio: 16 / 9 matches typical YouTube videos. The iframe is stretched to the wrapper, so it scales down instead of pushing the page sideways.

Try it in the HTML preview

Open the example in /html/try — StudyGrid’s live HTML preview, not the Python editor. The iframe will load YouTube if the preview allows third-party frames. If the player is blank, the sandbox may block it; the markup is still what you publish on a normal site.

Change dQw4w9WgXcQ to another id from a YouTube URL. Everything afterv= (before any extra & parameters) is the id.

Checklist

• Use youtube.com/embed/VIDEO_ID, not the watch URL
• Always set a title
• Copy allow and allowfullscreen from YouTube’s embed code when unsure
• Wrap the iframe so 16:9 scales to the column width

Next: web storage — saving small strings in the browser between visits, without a server.