Optimizing WordPress YouTube Embeds with Lite YouTube Embed

• Understanding Lite YouTube Embed
• Step 1: Installing Lite YouTube Embed
• Step 2: Overriding WordPress oEmbed for YouTube
• Step 3: Testing and Customization

Embedding YouTube videos in WordPress is typically a straightforward process, thanks to the platform's use of oEmbed. As a publisher, you simply paste the YouTube link into the editor and WordPress (with the help of oEmbed) does the rest. However, the default embed method can be heavy on page load times. An efficient alternative is using Paul Irish's Lite YouTube Embed, a method that significantly improves load times and overall site performance. This article guides you through the process of replacing the default WordPress YouTube embed with this lighter, faster-loading solution.

By implementing Lite YouTube Embed you greatly increase your chances of passing Core Web Vitals, something we cover more thoroughly in our article How to embed YouTube videos that pass Core Web Vitals.

¶Understanding Lite YouTube Embed

Lite YouTube Embed is designed to optimize loading performance for embedded YouTube videos. It initially loads a video's thumbnail and defers the loading of the full video player until the user clicks on it. This approach is particularly beneficial for sites with multiple embeds, as it minimizes the initial load impact.

¶Step 1: Installing Lite YouTube Embed

1. Download the Lite YouTube Embed Package: First, visit the GitHub repository and download the package.

2. Include CSS and JavaScript in Your Theme: Add the Lite YouTube Embed's CSS and JavaScript files to your WordPress theme. You can do this by modifying your theme's functions.php file:

function custom_lite_youtube_embed_scripts() {
 wp_enqueue_style('lite-yt-embed-style', get_stylesheet_directory_uri() . '/path-to/lite-yt-embed.css');
 wp_enqueue_script('lite-yt-embed-script', get_stylesheet_directory_uri() . '/path-to/lite-yt-embed.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'custom_lite_youtube_embed_scripts');

Adjust the paths to match where you've placed the downloaded CSS and JavaScript files in your theme.

¶Step 2: Overriding WordPress oEmbed for YouTube

WordPress automatically converts YouTube URLs into embeds using oEmbed. To override this with Lite YouTube Embed, you need to add a filter to embed_oembed_html.

1. Add a Filter to Your Theme's Functions File:

function custom_youtube_oembed_lite($html, $url, $args) {
 // Check if the URL is a YouTube link
 if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
  // Extract the YouTube ID from the URL
  preg_match('/(youtube\.com\/watch\?v=|youtu\.be\/)([^\&\?\/]+)/', $url, $idMatch);
  $youtubeId = $idMatch[2];

  // Return the Lite YouTube Embed HTML
  return '<lite-youtube videoid="' . esc_attr($youtubeId) . '"></lite-youtube>';
 }
 // Return the default embed HTML for non-YouTube URLs
 return $html;
}
add_filter('embed_oembed_html', 'custom_youtube_oembed_lite', 99, 3);

This function intercepts the HTML generated for oEmbed links. If it detects a YouTube URL, it replaces the standard embed code with the Lite YouTube Embed code, using the extracted video ID.

¶Step 3: Testing and Customization

After implementing the changes, test by embedding a YouTube video in a post:

Create a New Post In the WordPress editor, paste a YouTube URL and check how it renders on the frontend.

Customize as Needed Modify the Lite YouTube Embed CSS to better fit your site's design if necessary. There are a number of different customisations you can make, including changing the poster image. You have a lot of flexibility with the look of the video before it's clicked on, as it's simply an image and CSS, and not actually embedded at all.

By integrating YouTube Embed into WordPress, you enhance your website's performance without sacrificing the user experience of embedded videos. This method is particularly beneficial for sites that heavily rely on video content, ensuring that your pages load faster while still offering rich, engaging media.