Responsive YouTube Embed

A privacy-friendly, fast click-to-load embed

Background

This example builds on Tutorial 07: Embedding External Video, which covered the basic <iframe> embed pattern and the 16:9 responsive wrapper. Here the focus shifts to two practical concerns that matter in production: performance and privacy.

A standard YouTube <iframe> tag loads dozens of third-party scripts, fonts, and tracking cookies the moment the page renders — even if the user never watches the video. The click-to-load facade eliminates that cost entirely: the page shows only a poster image and a play button. YouTube's resources are fetched only after an explicit user action. Using youtube-nocookie.com instead of youtube.com further reduces cookie tracking even after the user clicks.

Live demo

Click the play button to load the video. Until then, the page makes no requests to YouTube — open DevTools Network to confirm.

Thumbnail: local poster.jpg used here. On a real site, use the video's own thumbnail (e.g., https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg).

The 16:9 responsive CSS

The wrapper uses aspect-ratio: 16 / 9 to maintain the video's proportions at any container width. Children are positioned absolutely so the iframe (once loaded) fills the entire box without affecting document flow.

.embed-16x9 { position: relative; aspect-ratio: 16 / 9; max-width: 640px; } .embed-16x9 iframe { position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 */ width: 100%; height: 100%; border: 0; }

Why aspect-ratio? Before this property was available, developers used the "padding-top hack" — padding-top: 56.25% — to maintain 16:9. The modern aspect-ratio property is cleaner, more readable, and supported in all current browsers.

Facade HTML

The facade is a positioned <div> styled as a 16:9 box with a background image. The only interactive element is a real <button>, which ensures keyboard and screen-reader access without any extra ARIA work. An aria-label describes the action since the button contains only an icon.

<div id="yt-facade" class="embed-16x9 yt-facade"> <button id="yt-play" class="yt-play-btn" aria-label="Play video"> <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M8 5v14l11-7z"/> </svg> </button> </div>

The swap: facade to iframe

On click, the script creates an <iframe> pointing to youtube-nocookie.com with autoplay=1 in the query string. Because this is a user-initiated action, browsers permit the autoplay — no policy violation. The facade's contents are then replaced with the iframe.

(function () { var facade = document.getElementById('yt-facade'); var btn = document.getElementById('yt-play'); function loadVideo() { var iframe = document.createElement('iframe'); iframe.src = 'https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?autoplay=1'; iframe.title = 'Big Buck Bunny — YouTube'; iframe.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture; fullscreen'); iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('loading', 'lazy'); iframe.style.position = 'absolute'; iframe.style.inset = '0'; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = '0'; /* Replace facade contents with the iframe */ facade.innerHTML = ''; facade.appendChild(iframe); } btn.addEventListener('click', loadVideo); }());

Video ID aqz-KE-bpKQ is Big Buck Bunny, a Creative Commons animated film hosted on YouTube. It is stable and embeddable, making it a reliable target for demos. On a production site you would substitute your own video's ID.

Why youtube-nocookie.com?

youtube.com sets third-party cookies that can track users across the web. youtube-nocookie.com is YouTube's privacy- enhanced domain: it serves the same player but does not set cookies unless the user interacts with the video. Combined with the click-to-load facade, this means a user who never clicks has zero YouTube tracking exposure.