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:

    youtube iframe lazyloadFull-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.
  • 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:

iframes lazyload scripts

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>

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.