Jan Hoek

Vital Video is a WordPress block plugin designed to improve Core Web Vitals performance when displaying YouTube videos.
Instead of traditional embedding, it provides a lightweight, performance-optimized solution that first loads a clickable video thumbnail.
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.
<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>Aspect Ratio: Choose between 16:9 and 4:3. </li>
<li>Mute Toggle: Control video playback behavior. </li>
<li>Thumbnail Quality: Select from High, Standard, or Maximum resolution. </li>
<li>Disable WebP: Turn off WebP usage if unavailable.</li>
</ul>
<h3>Mute Toggle</h3>
The Mute Toggle feature is designed primarily for mobile devices, adhering to browser autoplay policies.
Mute Toggle Off (Sound On):
Videos require two clicks to start playing:
<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>
Mute Toggle On (Sound Off):
<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>WebP is enabled by default. 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>
Only use “Disable WebP Images” when absolutely necessary!
<h3>External Services</h3>
This plugin connects to YouTube’s services to embed videos and retrieve video information:
YouTube Video Service:
<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>
YouTube oEmbed API:
<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>
YouTube Thumbnail Service:
<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>
Note: 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.
<h3>Contributing</h3>
Contributions are welcome! You can support Vital Video in various ways:
<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.

Automattic

Donncha O Caoimh (a11n)

Jeremy Herve

Brandon Kraft

Devin Walker

Brad Jorsch

Eric Binnion

Nauris

rheinardkorf

Mark (a11n)

Peter Petrov

Pete (a11n)

Andrei (a11n)

Ben Dwyer

Adnan Haque (a11n)

danwalmsley

Jaroslav "Dero" Polakovic

exelero

Karthik Bhat

davidlonjon

Liam Sarsfield (a11n)

Speed up your WordPress site by optimizing page performance with Jetpack Boost. Easily activate one-click optimizations to boost your Core Web Vitals.
Did you know that a faster website:-
<ul>
<li>Ranks higher on Google.</li>
<li>Improves bounce rate (people stay on your site for longer).</li>
<li>Increases your conversion rate.</li>
</ul>
Increase your website performance and speed up your website with one-click optimizations that supercharge your WordPress site’s performance and improve core web vitals scores for better search engine listings.
Improving Core Web Vitals helps you rank higher on Google. A faster website also improves your SEO, helps you reduce your bounce rate and increase your ecommerce conversion rate.
<ul>
<li>Largest Contentful Paint (LCP): Measures loading performance. Improve your LCP and improve your website loading speed.</li>
<li>First Input Delay (FID): Measures interactivity. To improve user experience pages should have a low FID.</li>
<li>Cumulative Layout Shift (CLS): Measures visual stability. Lowering your CLS helps improve your user experience.</li>
</ul>
<h3>Performance Modules</h3>
Optimize your website with the same techniques used on the world’s most successful websites.
Each technique that is used to increase website performance is packaged up as a module that you can activate and try out.
Currently, the plugin has 6 performance modules available:
<ol>
<li>
Optimize CSS Loading generates Critical CSS for your homepage, posts and pages. This can allow your content to show up on the screen much faster, particularly for viewers using mobile devices.
Read more about critical CSS generation at <a href="https://jetpack.com/redirect/?source=jetpack-boost-critical-css" rel="nofollow ugc">web.dev</a>
</li>
<li>
Page Cache speeds up your site by saving pages as static files. These files are quickly served to visitors, reducing load times and enhancing user experience.
</li>
<li>
Defer Non-Essential JavaScript moves some tasks to after the page loads, so that important visual information can be seen sooner and your website loads quicker.
Read more about deferring JavaScript at <a href="https://jetpack.com/redirect/?source=jetpack-boost-defer-js" rel="nofollow ugc">web.dev</a>
</li>
<li>
Image Guide is a must-have feature for anyone who wants to optimize the images on their website. With this guide, you can ensure that the images on your site are the right size and dimensions, which is critical for improving user experience, page speed, and site ranking. Following the tips and best practices outlined in the guide, you can reduce image file sizes and speed up your site. Check out our <a href="https://jetpack.com/support/jetpack-boost/image-performance-guide/" rel="nofollow ugc">support page</a> to learn more about this feature and how it can help you achieve a faster and smoother website experience for your users.
</li>
<li>
Image CDN allows your site to serve automatically-resized images in modern web formats directly from Jetpack’s worldwide Content Delivery Network.
Read more about Image CDNs at <a href="https://web.dev/image-cdns/" rel="nofollow ugc">web.dev</a>
</li>
<li>
Concatenate and Minify CSS and JS combines and shrinks your JavaScript and CSS resources to reduce the number and size of requests to your server, ensuring your content loads faster.
Read more about minifying files at <a href="https://web.dev/minify-css/" rel="nofollow ugc">web.dev</a>
</li>
</ol>
Don’t want to have to manually generate your critical CSS each time you update your site? Let us do the heavy lifting for you with automated critical CSS – each time you update your site we will automatically regenerate your critical CSS and update your performance scores. Upgrading also gives you dedicated email support access.
<h3>With 💚 by Jetpack</h3>
This is just the start!
We are working hard to bring more features and improvements to Jetpack Boost. Let us know your thoughts and ideas!
We’d also like to give a special THANK YOU to the XWP team who provided help with initial research and scoping of the plugin and were engaged with our team throughout the project.

Jetpack Boost – Website Speed, Performance and Critical CSS

10 seconds, one click, and improved my site speed by 12%. I'll take it.

Quick and easy


Boost is an easy-to-use plugin. The interface to improve CSS is just one click! 


Very easy to use


Tackled request with care. Expert team has a superb experience.


Awesome app in the history

Speed up your WordPress site with one-click optimizations like Page Cache, Critical CSS, and Image CDN to improve Core Web Vitals.

Vital Video Block vs Jetpack Boost – Website Speed, Performance and Critical CSS