Tulipe Media

Réflexions entrepreneuriales

Astuce WordPress : mettre un élément div au-dessus des iframe des vidéos Youtube

L’un des problèmes majeurs depuis la génération automatique des vidéos sous WordPress, c’est que tous les éléments flottants de type galeries photos ou menus se retrouvent en-dessous de la vidéo. En effet, la génération automatique des iframe ignore le paramètre wmode=transparent qu’il faut ajouter au code exportable de la vidéo.

Ainsi, de manière manuelle, au lieu d’avoir un iframe de ce type…

[code][/code]

…il faudrait plutôt avoir ceci (rajouter wmode=transparent):

[code][/code]

Mais alors, comment faire pour que tous les codes iframe youtube intègrent ce paramètre ? Rien de bien compliqué ! Rendez-vous dans votre fichier functions.php, et insérez-y la fonction suivante, qui cherchera les codes iframe et y ajoutera le paramètre manquant. De fait, les autres blocs ne seront plus en-dessous des éléments iframe !

[icon style= »chain » color= »red »]functions.php[/icon]

[code]
function add_video_wmode_transparent($html) {
if (strpos($html, « <iframe" ) !== false) {
$search = array('" frameborder="0"', '?hd=1?hd=1');
$replace = array('?hd=1&wmode=transparent" frameborder="0"', '?hd=1');
$html = str_replace($search, $replace, $html);

return $html;
} else {
return $html;
}
}
add_filter('the_content', 'add_video_wmode_transparent', 10);
[/code]

Ne manquez pas les conseils !

Nous ne spammons pas ! Consultez notre [link]politique de confidentialité[/link] pour plus d’informations.

Une réponse

  1. merci pour l’astuce!

    seul bémol à cette méthode, le wmode transparent de flash, car c’est de flash dont il s’agit, demande plus de ressources à l’utilisateur, de ce fait certaines personnes peuvent avoir des problèmes à l’affichage des vidéos si leur configuration n’est pas optimale.

    Donc selon ce que l’on souhaite faire il faut peut être parfois revoir le design d’un site pour qu’aucun div n’ai à se placer sur les iframe youtube, afin de préserver les performances d’affichage des vidéos.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *