The FASTEST YouTube Video Embed for WordPress

Performance YouTube Player Block for WordPress (Gutenberg) adds a new block to the WordPress Block Editor that lets you embed YouTube videos while keeping your site fast and performant. Get better scores on Lighthouse/PageSpeed Insights and offer the fast web experience to your users.

An essential plugin for web performance optimization
Make embedded YouTube videos load without render blocking, FOUC or CLS
No cookies! GDPR compliant and privacy focused
Made especially for the WordPress Block Editor (Gutenberg)

BLAZING FAST! Forget lazy loading and jQuery replacement hacks, Performance YouTube Player Block uses the very latest Web Components technology to load a YouTube embed fast. If you want to make the fastest website possible and want to include YouTube videos, don’t let YouTube ruin your Lighthouse/PageSpeed Insights/GT Metrix scores with a slow video embed.

IMPROVE CORE WEB VITALS! The Performance YouTube Player is rendered on the Shadow DOM, letting the browser focus on other parts of the page render so you get fast loading times. No flashes of unstyled content (FOUC), no CLS issues (Cumulative Layout Shift) and no render blocking time.

PRIVACY FIRST! Load YouTube without the cookies – no tracking, no cookies, GDPR compliant. Inline with the regulations laid out by the European Union, Performance YouTube is General Data Protection Regulation compliant, and only sends cookies once the user interacts with the video.

WEBP THUMBNAILS WebP is a newer compression algorithm for images – the average WebP file size is 25%-34% smaller than a JPG. This means your video thumbnails load quicker. WebP image format is now supported by all major browsers.

RESPONSIVE & ACCESSIBLE Performance YouTube Block is responsive by default (the video resizes for mobile/desktop) and offers many video options over and above the standard WordPress YouTube embed, including looping and hiding controls. Performance YouTube Block is also accessible and SEO friendly.

Performance YouTube Block Features:

Blazing fast YouTube Embed – get best possible Lighthouse/PageSpeed scores
Fully responsive 16:9 – works on mobiles, tablets, desktops and adapts to your website size
No cookies, tracking or GDPR worries on load
Supports wide and full width block alignment
Optionally set custom video start time
Optionally hide controls after initial start
Optionally loop video
Accessible via keyboard, customise ARIA and alt text
Starts preloading video when scrolling in to view
Loads webP thumbnail with JPEG fallback
Option to turn off webP thumbnail if required
No API keys required

Using the Performance YouTube Block

Open the Block Editor, add a new block / use the Block Inserter and search for Performance YouTube block under Embed category. You can also insert it directly from the editor by typing a ”/” slash and then Performance YouTube.

Performance YouTube Settings

There are no global settings for the block, each block can be customised as you need.

Available settings are:

Alignment – content width, wide width, full width (Theme setting dependent)
Video Title – add the title for accessibility and SEO purposes
Video Start Time – set a YouTube video start time in seconds
Controls – hide the controls for the video once it is playing
Loop – loop the video after it has finished playing
Thumbnail – turn off webP thumbnail (Older YouTube videos may not have a webP thumbnail)

Nerdy Stuff

The plugin utilises Web Components and uses two of the main standards of that; custom elements and Shadow DOM. YouTube Performance Block is a component with self-contained HTML, CSS, and JavaScript attached to the page using Shadow DOM. Shadow DOM is one of the three Web Components standards, and using it for the YouTube embed adds improved load speed and avoids an awful FOUC. Using Shadow DOM allows for CSS scoping, DOM encapsulation, better composition and the custom element is resilient and extremely reusable.

The plugin was inspired by Paul Irish’s Lite YouTube Embed, forked from Justin Ribeiro’s Shadow DOM web component version of the same code. I’ve updated it, fixed a few problems and fully integrated it in to WordPress Gutenberg, so it just works.

Instructions for Install

Download the plugin zip file.

Go to WordPress Admin > Plugins > Add New Plugin > Upload Plugin, and upload the plugin zip file.

There are other ways to install the plugin, please see the WordPress documentation here (http://codex.wordpress.org/Managing_Plugins).

Once installed, Activate the plugin.

The Performance YouTube block will be available in your block inserter.

Requirements

The plugin is for WordPress, so requires WordPress to be installed. As it is a Block for the Block Editor (Gutenberg) then you should have WordPress 5.0 or above.

The plugin will not work with Classic Editor installed (as this disables Gutenberg Block Editor)

FAQ

Q: My video thumbnail displays as a grey YouTube error thumbnail

A: The video you are embedding doesn’t have a webP thumbnail. You can either edit the video on YouTube and resave the thumbnails to generate new thumbnails, or you can use the Disable WebP option in the Blocks settings to display the JPG version. Not all videos use webP images for thumbnails, so older videos need to have their thumbnails regenerated to generate a webP thumbnail.

Q: Can it autoplay the video?

A: This plugin is designed for performance and autoplaying videos ruins performance. It’s also annoying! You do not want to autoplay videos for your users if your focus is on performance.

Change Log

Version 1.0 (2020-05-17)

Initial release

Legal stuff

GDPR compliance and compliance with privacy regulations is your own responsibility. The information provided by this plugin and author does not, and is not intended to, constitute legal advice; instead, all information, content, and materials available on this site are for general informational purposes only.

Performance YouTube Player Block WordPress Plugin