Lightweight YouTube and Vimeo embeds: facade generator
Paste the links to the videos and get a ready-made block that shows a preview and loads the player only after a click. Zero external libraries: everything needed is inside the generated code.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, private vimeo.com/ID/HASH. The timestamp ?t= / &start= is carried over into the facade.
Optional details separated by a vertical bar: URL | Title | Thumbnail URL.
W:H or W/H. It goes into the CSS property aspect-ratio.
hqdefault exists for every video. maxresdefault exists only where the original was uploaded in 720p or higher — otherwise the image simply will not load and the viewer sees an empty rectangle.
aria-label and the iframe's title.
i.ytimg.com: only the oEmbed API returns it, and we cannot make a request to it — the tool works offline. So upload the frame to the site's media library and paste the link. Without it you get a gradient placeholder with a play button.
Paste at least one link to get the code.
Paste into the Gutenberg “Custom HTML” block. The block contains <style> and <script>: if your role lacks the unfiltered_html capability, or a security plugin strips scripts, the facade will show the thumbnail but the click will not work.
The code is assembled in your browser. Neither the generated block nor the preview itself makes any external request — the images from i.ytimg.com in the preview are shown as addresses, not loaded.
A single embedded video costs over a megabyte before the first click
A standard YouTube iframe loads about 1.3 MB in a couple of dozen requests to seven third-party domains — before the visitor has even decided to watch the video. On a page with three videos that is three times as much, and it is almost always what ruins the speed scores on mobile. The facade solves the problem head-on: at first only a preview image with a play button is shown, and the real player is inserted at the moment of the click. Before the click the page weighs an order of magnitude less. There is a popular library for this, but every guide advises loading it from someone else's CDN — that is, removing one external request and adding another. Here the generated code is completely self-contained: the styles and the script sit inside the block. There is a further effect, on privacy. A standard iframe sets tracking cookies before anything is even watched. The youtube-nocookie.com domain postpones that until playback starts, and the facade until the click. For sites aimed at a European audience this bears directly on cookie-consent requirements.