Replace YouTube iframe with preview image

Definition

This feature detects the presence of compatible YouTube iframes in your site, and changes their markup so that the iframe tag is replaced by an img tag containing the thumbnail that's set by default on YouTube. Once a visitor clicks on the thumbnail, the iframe tag will be loaded and the video will be played.

If the LazyLoad for images feature is enabled, the thumbnail will be lazyloaded as well.

Thumbnail customization

Thumbnail resolution

You can select the resolution of the thumbnail by checking this guide.

Thumbnail extension

By default, the thumbnail will use an JPG extension. You can change the thumbnail extension to WebP, by adding to your site the following snippet:

add_filter( 'rocket_lazyload_youtube_thumbnail_extension', function( $extension ){
  return 'webp';
});

How to check if Replace YouTube iframe with preview image feature is working

Markup changes

WP Rocket will apply changes to the HTML markup. To look for them follow these steps:

1. Open your browser and visit the page with the YouTube iframe present.
2. Open the Developer tools.   
   
   - In Chrome: Chrome Menu in the upper-right-hand corner of the browser window → select More Tools > Developer Tools → Elements.  
   - In Firefox: Firefox Menu in the upper-right-hand corner of the browser window → Web Development → Inspector  
   - In Safari: Develop → Connect Web Inspector → Elements
3. Click on the “Select an element in the page to inspect” icon and select the YouTube iframe.
4. Identify the .rll-youtube-player class
   
   See below image for reference:
   

   Full-size image URL

It’s possible to notice the changes applied by our feature (that won’t be present in the non-cached page). The changes are the following:

• The rll-youtube-player class will be added to the iframe.
• The preview image will be added in a new img tag with src, width and height  parameters.
• If the LazyLoad for images feature is enabled, the img tag for the preview image will have loading=”lazy", class=”lazyloaded” and data-ll-status=”loaded”.

Use the Network tab in your browser

Alternatively, you can confirm the feature is working by looking for YouTube’s files like embed.js, remote.js, endscreen.js, and others. Those should be loaded only after you click the “play” button. 

1. Open your browser and visit the page with the YouTube iframe present.
2. Open Developer tools.
3. Click on the Network tab.
4. Click on the JS filter.
5. Click on the “play” button. YouTube's files should be loaded after that.

When our feature is disabled/not working, these files will be loaded immediately when the page loads.

See below how to check it’s working:

If what you are seeing doesn’t look like the above illustrations, the feature isn’t working properly and you can contact our support team.

Compatible markup

In order to apply the Replace YouTube iframe with preview image feature, WP Rocket is looking for iframe that contains src attribute with the YouTube URL.

Example:

<iframe class="tcb-responsive-video" data-code="g_v3gxJYM0Q" data-provider="youtube" src="https://www.youtube.com/embed/g_v3gxJYM0Q?rel=0&modestbranding=0&controls=1&showinfo=1&fs=1&wmode=transparent" data-src="https://www.youtube.com/embed/g_v3gxJYM0Q?rel=0&modestbranding=0&controls=1&showinfo=1&fs=1&wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

Known issues

• Sometimes, this feature can add an empty space below or above the iframe. For more information and suggested solutions, please check this article.
• If you are using the Complianz plugin and have enabled YouTube blocking in the Services section, this will prevent the Replace YouTube iframe with preview image feature from working. It changes the HTML markup of the video so that it cannot be detected by WP Rocket. Disable this setting to remove the block: