Vlad Zelinskyi

Every embedded YouTube video adds weight to your page — external scripts, iframes, tracking pixels — even if the visitor never presses Play. Space Lightplay fixes that.
Drop the block into any post or page, paste a YouTube video URL, and Space Lightplay renders a static preview image with a customizable Play button. The actual iframe is injected only when the visitor clicks. No JavaScript frameworks, no third-party requests until interaction.
Why it matters:
<ul>
<li>Pages with 3–5 embedded videos can save 2–4 MB of initial page weight and dozens of network requests.</li>
<li>Largest Contentful Paint (LCP) and Time to Interactive (TTI) improve because heavy iframes no longer block rendering.</li>
<li>Privacy improves too — no cookies or tracking scripts load until the visitor explicitly chooses to play.</li>
</ul>
What you get:
<ul>
<li>One block, one job — lazy-load YouTube video embeds with zero configuration required.</li>
<li>Custom poster image — upload any image from the Media Library or use the automatic YouTube thumbnail.</li>
<li>Aspect ratio control — 16:9, 4:3, 1:1, 9:16 (vertical/Shorts), or 21:9 cinematic.</li>
<li>Start time — set a starting timecode, or paste a YouTube URL with ?t=… and it fills automatically.</li>
<li>Above-the-fold mode — disables lazy-load on the preview image for hero videos, improving LCP.</li>
<li>Hover prefetch — opens connections to YouTube the instant the cursor lands on the block, so the iframe loads noticeably faster on click. No extra config.</li>
<li>Play button styling — control size, button shape (circle, rounded, square), triangle corner roundness, background color, icon color, and hover states using the native WordPress color picker with full theme palette support.</li>
<li>Block style variations — Minimal, Bold, and Glass presets in one click.</li>
<li>Pulse animation — optional hover effect to draw attention to the Play button.</li>
<li>Thumbnail quality — choose between standard and maximum resolution thumbnails.</li>
<li>Accessible by default — full keyboard navigation, ARIA attributes, optional descriptive title for screen readers, visible focus indicators, RTL support, and prefers-reduced-motion support.</li>
<li>Noscript fallback — visitors without JavaScript get a direct link to the YouTube video (with timecode preserved).</li>
<li>Responsive — chosen aspect ratio adapts to any container width.</li>
<li>Clean uninstall — removing the plugin leaves no options, transients, or database entries behind.</li>
</ul>
For developers:
Space Lightplay uses register_block_type_from_metadata() with a standard block.json manifest. All assets are declared in block.json and enqueued automatically by WordPress. The plugin adds zero global hooks, filters, admin pages, or database entries. Output is a server-rendered block via render.php.

Space Lightplay

A single Gutenberg block that lazy-loads YouTube video embeds. Shows a static preview, loads the iframe only on click. Fast, lightweight, no bloat.

WordPress.org

This plugin optimizes the loading of images (and videos) with prioritization to improve <a href="https://web.dev/articles/lcp" rel="nofollow ugc">Largest Contentful Paint</a> (LCP), lazy loading, and more accurate image size selection.
The current optimizations include:
<ol>
<li>Add breakpoint-specific <code>fetchpriority=high</code> preload links (both as <code>LINK[rel=preload]</code> elements and <code>Link</code> response headers) for image URLs of LCP elements:
<ol>
<li>An <code>IMG</code> element, including the <code>srcset</code>/<code>sizes</code> attributes supplied as <code>imagesrcset</code>/<code>imagesizes</code> on the <code>LINK</code>.</li>
<li>The first <code>SOURCE</code> element with a <code>type</code> attribute in a <code>PICTURE</code> element. (Art-directed <code>PICTURE</code> elements using media queries are not supported.)</li>
<li>An element with a CSS <code>background-image</code> inline <code>style</code> attribute.</li>
<li>An element with a CSS <code>background-image</code> applied with a stylesheet (when the image is from an allowed origin).</li>
<li>A <code>VIDEO</code> element’s <code>poster</code> image.</li>
</ol>
</li>
<li>Ensure <code>fetchpriority=high</code> is only added to an <code>IMG</code> when it is the LCP element across all responsive breakpoints.</li>
<li>Add <code>fetchpriority=low</code> to <code>IMG</code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.</li>
<li>Lazy loading:
<ol>
<li>Apply lazy loading to <code>IMG</code> tags based on whether they appear in any breakpoint’s initial viewport.</li>
<li>Implement lazy loading of CSS background images added via inline <code>style</code> attributes.</li>
<li>Lazy-load <code>VIDEO</code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a <code>VIDEO</code> is the LCP element, it gets <code>preload=auto</code>; if it is in an initial viewport, the <code>preload=metadata</code> default is left; if it is not in an initial viewport, it gets <code>preload=none</code>. Lazy-loaded videos also get initial <code>preload</code>, <code>autoplay</code>, and <code>poster</code> attributes restored when the <code>VIDEO</code> is going to enter the viewport.</li>
</ol>
</li>
<li>Responsive image sizes:
<ol>
<li>Ensure <a href="https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/" rel="nofollow ugc"><code>sizes=auto</code></a> is set on <code>IMG</code> tags after setting correct lazy-loading (above).</li>
<li>~~Compute the <code>sizes</code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by <code>sizes=auto</code>).~~ (This has been removed due to an <a href="https://github.com/WordPress/performance/issues/2098" rel="nofollow ugc">issue</a>; use <a href="https://wordpress.org/plugins/auto-sizes/" rel="ugc">Enhanced Responsive Images instead</a>.)</li>
</ol>
</li>
<li>Reduce the size of the <code>poster</code> image of a <code>VIDEO</code> from full size to the size appropriate for the maximum width of the video (on desktop).</li>
</ol>
This plugin requires the <a href="https://wordpress.org/plugins/optimization-detective/" rel="ugc">Optimization Detective</a> plugin as a dependency. Please refer to that plugin for additional background on how this plugin works as well as additional developer options.
👉 Note: This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won’t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.
Your site must have the REST API accessible to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.

Image Prioritizer

Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes.

Space Lightplay vs Image Prioritizer