Remplacer l'iframe Youtube par une image d'aperçu

Définition

Cette option détecte la présence d'iframes YouTube compatibles sur votre site et modifie leur balisage de sorte que la balise iframe soit remplacée par une balise img contenant la vignette définie par défaut sur YouTube. Lorsqu'un visiteur clique sur la vignette, la balise iframe est chargée et la vidéo est lue.

Si l'option LazyLoad pour les images est activée, la vignette sera également lazyloadée.

Personnalisation des vignettes

Résolution des vignettes

Vous pouvez sélectionner la résolution de la vignette en consultant ce guide.

Extension des vignettes

Par défaut, la vignette utilise l'extension JPG. À partir de WP Rocket 3.13.2, vous pouvez changer l'extension de la vignette en WebP, en ajoutant à votre site le snippet suivant :

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

Comment vérifier si la fonction Remplacer l'iframe YouTube par une image d'aperçu fonctionne ?

Changements de balises

WP Rocket appliquera des changements au balisage HTML. Pour les rechercher, suivez les étapes suivantes :

1. Ouvrez votre navigateur et visitez la page où se trouve l'iframe YouTube.
2. Ouvrez les outils du développeur
   
   - Dans Chrome : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Inspecter > Eléments
   - Dans Firefox : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Examiner l'élément
   - Dans Safari : Cliquez avec le bouton droit de la souris n'importe où sur la page. Choisissez Inspecter l'élément
3. Cliquer sur l'icône “Sélectionner un élément de la page à inspecter” et sélectionner l'iframe YouTube.
4. Identifier les class .rll-youtube-player
   
   Voir l'image ci-dessous :
   

   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:

Il est possible de remarquer les changements appliqués par notre fonctionnalité (qui ne seront pas présents dans la page non mise en cache). Les changements sont les suivants :

• la class rll-youtube-player sera ajoutée à l'iframe.
• L'image d'aperçu sera jouté dans une balise img avec les paramètres src, width et height.
• Si le LazyLoad pour les images est activée, la balise img pour l'image d'aperçu aura aussi loading=”lazy", class=”lazyloaded” et data-ll-status=”loaded”.

Utilisez l'onglet Réseau de votre navigateur

Vous pouvez également confirmer que l'option fonctionne en recherchant des fichiers de YouTube tels que embed.js, remote.js, endscreen.js, et autres. Ceux-ci ne doivent être chargés qu'après avoir cliqué sur le bouton “play”.

1. Ouvrez votre navigateur et visitez la page où se trouve l'iframe YouTube.
2. Ouvrir Outils du développeur.
3. Cliquer sur l'onglet Réseau .
4. Cliquer sur le filtre JS .
5. Cliquer sur le bouton “play”. Les fichiers de YouTube devraient ensuite être chargés.

Lorsque cette option est désactivée ou ne fonctionne pas, ces fichiers sont chargés immédiatement lors du chargement de la page.

Voir ci-dessous comment vérifier qu'il fonctionne :

Si ce que vous voyez ne ressemble pas aux illustrations ci-dessus, c'est que ça ne fonctionne pas correctement et vous pouvez contacter notre support.

Balisage compatible

Afin d'appliquer l'option Remplacer l'iframe YouTube par une image d'aperçu, WP Rocket recherche un iframe qui contient l'attribut src avec l'URL de YouTube.

Exemple :

<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>

Problèmes connus

• Parfois, cette option peut ajouter un espace vide en dessous ou au-dessus de l'iframe. Pour plus d'informations et des suggestions de solutions, veuillez consulter cet article.
• Si vous utilisez l'extension Complianz et que vous avez activé le blocage de YouTube dans la section Services, cela empêchera la fonctionnalité Remplacer l'iframe YouTube par une image d'aperçu de fonctionner. Elle modifie le balisage HTML de la vidéo afin qu'elle ne puisse pas être détectée par WP Rocket. Désactivez ce réglage pour supprimer le blocage :