Input HarborISSUE #26 of 46

youtube · iframe embeds

FormaVSCaptain Invalid Input

Forma saysEmbedding a YouTube video is just an <iframe> pointing at the video’s embed URL.

You don't host video to show YouTube — you embed it. Grab the embed URL (https://www.youtube.com/embed/VIDEO_ID) and drop it into an <iframe>. YouTube handles the player, formats, and streaming.

Add allowfullscreen and the standard allow permissions. For performance, consider lazy-loading (loading="lazy") or a "click to load" thumbnail, since each embed pulls in a heavy player.

Power-ups you unlock

Embed URL form: youtube.com/embed/VIDEO_ID
It is a normal <iframe> — YouTube runs the player
Add allowfullscreen and loading="lazy"
Each embed is heavy; lazy-load or use a click-to-load poster

Captain Invalid Input attacks — common mistakes

Using the watch?v= URL instead of the /embed/ URL
Embedding many players on one page → slow load
Forgetting allowfullscreen so users can not expand

Boss battleEmbed any YouTube video by its ID in a 16:9 iframe with allowfullscreen and loading="lazy".

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;display:grid;place-items:center;height:100vh;margin:0">
  <iframe width="360" height="203"
    src="https://www.youtube.com/embed/aqz-KE-bpKQ"
    title="YouTube video" loading="lazy"
    allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture"
    allowfullscreen style="border:0"></iframe>
</body></html>

▶ Open the interactive comic issue

‹ Plug-Ins · Object · Embed · Why They'Re Rare Now Web Apis · The Platform Surface ›