Jan Hoek

<p>Vital Video is a WordPress block plugin designed to improve Core Web Vitals performance when displaying YouTube videos.</p>
<p>Instead of traditional embedding, it provides a lightweight, performance-optimized solution that first loads a clickable video thumbnail.</p>
<p>The Vital Video Block doesn’t play videos in the WordPress editor. It’s designed to prioritize performance and user experience on your frontend. To test video behavior, simply preview your post or page.</p>
<h3>Features</h3>
<ul>
<li>Performance-first YouTube video display.  </li>
<li>Automatic video thumbnail and title retrieval.  </li>
<li>WebP image support for faster image loading.  </li>
<li>Customizable aspect ratios (4:3 and 16:9).  </li>
<li>Displays the video title in the image.  </li>
<li>Multiple thumbnail quality options.  </li>
<li>Minimal initial page load impact.  </li>
<li>Option to disable WebP images if unavailable.  </li>
<li>Advanced video playback controls.  </li>
<li>Uses YouTube’s no-cookie thumbnail service.  </li>
<li>Respects modern browser autoplay policies.  </li>
<li>Alt text matches the video title.</li>
<li>Thumbnail dimensions set based on selected image size:
<ul>
<li>HQ (480×320): Default size  </li>
<li>SD (640×480): Standard size  </li>
<li>MAX (1280×720): Highest available resolution</li>
</ul>
</li>
</ul>
<h3>Vital Video Settings</h3>
<ul>
<li><strong>Aspect Ratio</strong>: Choose between 16:9 and 4:3.  </li>
<li><strong>Mute Toggle</strong>: Control video playback behavior.  </li>
<li><strong>Thumbnail Quality</strong>: Select from High, Standard, or Maximum resolution.  </li>
<li><strong>Disable WebP</strong>: Turn off WebP usage if unavailable.</li>
</ul>
<h3>Mute Toggle</h3>
<p>The Mute Toggle feature is designed primarily for mobile devices, adhering to browser autoplay policies.</p>
<p><strong>Mute Toggle Off (Sound On):</strong></p>
<p>Videos require two clicks to start playing:</p>
<ol>
<li>The first click loads the video.  </li>
<li>The second click begins playback. Ideal for maintaining user control and preventing unexpected audio.</li>
</ol>
<p><strong>Mute Toggle On (Sound Off):</strong></p>
<ul>
<li>Videos play with a single click.  </li>
<li>Automatically starts muted.  </li>
<li>Perfect for situations where immediate video playback is desired.  </li>
<li>Complies with browser autoplay restrictions.</li>
</ul>
<h3>Disable WebP Images</h3>
<ul>
<li><strong>WebP is enabled by default.</strong> Most thumbnails will use the WebP format.  </li>
<li>However, if you encounter a dummy placeholder image, try selecting a different thumbnail size to see if another WebP version exists.  </li>
<li>If no WebP images are available, you can enable the “Disable WebP Images” option as a last resort. This – will use fallback formats like JPG instead.</li>
</ul>
<p><em>Only use “Disable WebP Images” when absolutely necessary!</em></p>
<h3>External Services</h3>
<p>This plugin connects to YouTube’s services to embed videos and retrieve video information:</p>
<p><strong>YouTube Video Service:</strong></p>
<ul>
<li>The plugin connects to YouTube’s embed service (youtube-nocookie.com) to display videos</li>
<li>When a video is played, it loads the video player from YouTube’s servers</li>
<li>YouTube’s terms of service: https://www.youtube.com/static?template=terms</li>
<li>YouTube’s privacy policy: https://policies.google.com/privacy</li>
</ul>
<p><strong>YouTube oEmbed API:</strong></p>
<ul>
<li>Used to fetch video titles when adding videos to your content</li>
<li>Sends the YouTube video ID to retrieve the video title</li>
<li>API documentation: https://developers.google.com/youtube/v3/docs/videos</li>
</ul>
<p><strong>YouTube Thumbnail Service:</strong></p>
<ul>
<li>Retrieves video thumbnail images from i.ytimg.com</li>
<li>Only loads thumbnails for videos you’ve embedded</li>
<li>No personal data is sent to this service</li>
</ul>
<p><strong>Note:</strong> This plugin uses YouTube’s privacy-enhanced mode by default, which helps protect your visitors’ privacy by not setting cookies until the video is played.</p>
<h3>Contributing</h3>
<p>Contributions are welcome! You can support Vital Video in various ways:</p>
<ul>
<li>Write about the plugin on your blog or share it on social media.  </li>
<li><a href="https://translate.wordpress.org/projects/wp-plugins/vital-video-block/" rel="nofollow ugc">Translate the plugin into your language</a> using your WordPress.org account.  </li>
<li><a href="https://wordpress.org/support/plugin/vital-video-block/reviews/#new-post" rel="ugc">Review the plugin here on WordPress.org</a>.</li>
</ul>


Vital Video Block

A YouTube block optimized for performance, allowing you to embed YouTube videos without harming your Core Web Vitals.

Rick Hoekman

<p>Simple but effective performance tweaks for WordPress—now with a polished, tabbed settings UI.</p>
<p>Features are grouped like your workflow: Scripts & Assets, Network, Security, Performance & Admin, and Database.</p>
<h4>Scripts & Assets</h4>
<ul>
<li>Contact Form 7 Smart Loader — Only loads CF7 assets on pages with a form.</li>
<li>CF7 reCAPTCHA Smart Loader — Dequeues reCAPTCHA when no CF7 form is present.</li>
<li>Disable Advanced Custom Fields on Frontend — Stops ACF assets from loading on the frontend.</li>
<li>Emoji Unloader — Removes Emoji CSS and JavaScript.</li>
<li>Defer JavaScript — Adds defer attribute to eligible scripts.</li>
<li>Async JavaScript — Adds async attribute to eligible scripts.</li>
<li>Async/Defer Exclude Handles — A textarea to exclude script handles from async/defer.</li>
<li>Remove Query Strings — Strips ?ver= from CSS/JS URLs to improve CDN caching.</li>
<li>Block CSS Smart Loader (classic themes) — Dequeues block CSS on singular pages without blocks.</li>
<li>Separate Core Block CSS (WP 5.8+) — Opt-in to load only the CSS for blocks used on the page.</li>
<li>Disable Dashicons for Visitors — Removes dashicons for non-logged-in users.</li>
<li>Disable jQuery Migrate (frontend) — Drops jquery-migrate from frontend dependencies.</li>
<li>Boost Hero Image (fetchpriority) — Adds fetchpriority=”high” to the first content image on singular pages.</li>
<li>Lazy‑load iframes in Content — Ensures iframes in post content use loading=”lazy”.</li>
<li>WooCommerce Smart Loader — Loads WC CSS/JS only on WooCommerce pages (shop, product, cart, checkout, account).</li>
</ul>
<h4>Network</h4>
<ul>
<li>DNS Single Post Prefetch — Prefetch homepage on singular pages to speed return navigation (HTTP/2).</li>
<li>Resource Hints Hosts — Add domains for dns-prefetch and preconnect (one per line).</li>
<li>Google Fonts Preconnect — Adds preconnect hints for fonts.googleapis.com and fonts.gstatic.com.</li>
</ul>
<h4>Security</h4>
<ul>
<li>Disable XML-RPC — Blocks the XML-RPC endpoint unless you need it.</li>
<li>Disable WP Embeds / oEmbed — Removes discovery links and wp-embed script.</li>
<li>Head Cleanup — Removes RSD, WLW, generator, shortlink, and extra feed links.</li>
</ul>
<h4>Performance & Admin</h4>
<ul>
<li>Disable WordPress Heartbeat (Frontend) — Keep editor autosave, reduce frontend pings.</li>
<li>Heartbeat Interval — Set between 15–120 seconds.</li>
<li>WP‑Cron Guidance — Advisory copy to move cron to a real system cron.</li>
</ul>
<h4>Database</h4>
<ul>
<li>Limit Post Revisions — Define WP_POST_REVISIONS to 5.</li>
<li>Autosave Interval (advisory) — Suggest a wp-config constant.</li>
<li>Empty Trash Days (advisory) — Suggest a wp-config constant.</li>
</ul>
<h4>UI/UX</h4>
<ul>
<li>Tabbed settings with keyboard navigation and ARIA roles.</li>
<li>Card layout, helpful tooltips, and consistent spacing.</li>
<li>Sticky save bar with “unsaved changes” hint.</li>
<li>“Reset all settings” link (with nonce) to clear options without uninstalling.</li>
</ul>


Vital Video Block vs Performance Tweaks