Blogger : mes vidéos ne s'affichaient plus sur mobiles mais j'ai résolu le problème !

J'ai constaté, un peu par hasard, que les vidéos YouTube intégrées dans les nouveaux articles de mon blog Twizy X-Files ne s'affichent pas sur mobiles, et ce depuis que Blogger a modernisé son interface, il y a un an. Très mauvaise surprise !

Heureusement les anciens articles ne semblent pas avoir subi ce bug, et c'est ce qui m'a conduit à trouver la solution.

Bug de Blogger avec les affichages de vidéos YouTube sur mobiles

Voici ce que donnent les affichages sur ordinateur et sur smartphone quand on intègre une vidéo YouTube avec la nouvelle version de Blogger :

Sur ordinateur c'est OK, sur smartphone rien !

 

La solution

Comme je ne compte pas trop sur la réactivité de Google sur les problèmes de Blogger, j'ai cherché et trouvé une solution en constatant que mes anciens articles n'étaient pas impactés, ce qui signifie que leur code HTML fonctionne. Et voilà ce que ça donne en corrigeant ce nouveau code problématique :

Sur ordinateur, toujours bon. Sur mobile, youpi ça marche !

 

Comment corriger le problème

Quand on intègre une vidéo YouTube dans un article, la nouvelle version de Blogger ajoute le code HTML suivant ("src" et "youtube-src-id" varient en fonction de la vidéo choisie) :

<iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/y6vi9yxSHTw" width="320" youtube-src-id="y6vi9yxSHTw"></iframe>

Le problème semble venir du paramètre "class" qu'il faut modifier de la façon suivante :

- Entrer dans l'article en édition HTML

- Rechercher dans ce fatras HTML que fournit maintenant Blogger : class="BLOG_video_class"

- Remplacer BLOG_video_class par YOUTUBE-iframe-video (qui était le code de l'ancienne version)

- Enregistrer les modifications (mettre à jour)

- Tester sous PC et smartphone

Et hop le tour est joué !