Problème du wmode dans les vidéos
Vue8807Par Tyma le 17/04/2012 à 11:56 dans la catérogie Astuces
Lors de ma dernière période de stage en entreprise j'ai découvert un problème pouvant être assez embêtant sur un site internet qui utilisent des vidéos (mais pas que), le wmode.
C'est quoi le wmode ?
Le wmode est un paramètre que nous pouvons retrouver dans les objets en flash ou les lecteurs vidéo que vous devez utiliser très régulièrement (je pense notamment à ceux des sites Youtube ou encore Dailymotion).Ce paramètre permet de régler le superposition de l'élément par rapport au reste de la page. Par conséquent si le wmode est mal configuré (ou pas du tout comme souvent), vous pourriez avoir de jolies surprises, comme le menu de navigation de votre site qui passerait en dessous de la vidéo, rendant une partie des liens inaccessible à vos visiteurs (ce qui est inadmissible pour un site web).
Sans le wmode, vous pouvez voir que le menu passe bien en dessous de la vidéo le rendant en partie inutilisable
Comment configurer le wmode ?
Pour configurer le paramètre wmode il vous suffit de l'ajouter à la suite du script de votre vidéo (ou de l'élément flash). Le code a ajouté est différent d'un lecteur vidéo à un autre mais il est très facile de l'adapter en analysant le script de la vidéo, qui se ressemblent assez souvent.Ici je vais vous expliquer comment faire pour les vidéos des sites Youtube et Dailymotion (si vous avez besoin d'aide pour un autre site, n'hésitez pas à me le demander dans un commentaire, je vous aiderais sans problème).
wmode pour Youtube
Voici le code de base d'une vidéo que le site propose pour l'intégrer sur son site.Code : HTML
<iframe width="560" height="315" src="http://www.youtube.com/embed/bISeP7cnBc8" frameborder="0" allowfullscreen></iframe>
Voyons maintenant comment et surtout où ajouter le paramètre wmode à cette vidéo.
Code : HTML
<iframe width="560" height="315" src="http://www.youtube.com/embed/bISeP7cnBc8?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Si vous regardez bien les deux codes que je viens de vous fournir pour la même vidéo, il suffit donc d'ajouter le paramètre wmode à la suite même de la source de la vidéo avec "?wmode=opaque" pour ne plus avoir ce genre de problème.
Avec le wmode, vous pouvez voir que le menu passe bien au dessus de la vidéo et il est maintenant utilisable
wmode pour Dailymotion
Voici le code de base d'une vidéo que le site propose pour l'intégrer sur son site.Code : HTML
<iframe frameborder="0" width="480" height="276" src="http://www.dailymotion.com/embed/video/x8ili4"></iframe>
Comme vous pouvez le voir le code pour pouvoir intégrer une vidéo Dailymotion sur votre site est visiblement assez semblable à celui de Youtube (que nous avons déjà vu), le paramètre du wmode sera aussi placé au même endroit.
Code : HTML
<iframe frameborder="0" width="480" height="276" src="http://www.dailymotion.com/embed/video/x8ili4?wmode=opaque"></iframe>
Comme je vous l'avais dit les lecteurs de vidéo se ressemblent assez souvent et quoi de mieux qu'un exemple pour vous le démontrer.
Le wmode ne dérange que le menu ?
Malheureusement non, même si le menu de navigation est sans doute le plus problématique pour le visiteur, le wmode peut également apporter des problèmes sur l'intégration de diaporama ou de photo en JavaScript.Pour un exemple, il m'arrive souvent d’intégrer des vidéos et des photos dans une même actualité photo sur le forum photo Clic-Clac (j'ai également le même agrandisseur de photo que vous pouvez retrouver sur Tyma-Web). Un jour je me suis rendu compte que si un visiteur cliquait sur une photo pour l'agrandir (ce qui est le but du système d'ailleurs) et qu'une vidéo se trouvait sur la même page, un problème survenait.
Voici un aperçu du problème en image (il a suffit l'ajout du paramètre wmode sur les vidéos pour le corriger).
J'espère que cette astuce vous permettra enfin de régler le problème du wmode sur les vidéos et ainsi vous permettra la création de site accessible.
À propos de lauteur : Tyma
Développeur web sur Chartres, photographe amateur, créateur et administrateur du forum photo Clic-Clac (depuis octobre 2009) ainsi que vice-président bénévole du club photo Chartres Objectif en tant que webmaster. Jai suivi un BTSBrevet de technicien supérieur Informatique de Gestion (option développeur dapplication) et jai déjà travaillé pour une agence de création de site internet.
Développeur web sur Chartres, photographe amateur, créateur et administrateur du forum photo Clic-Clac (depuis octobre 2009) ainsi que vice-président bénévole du club photo Chartres Objectif en tant que webmaster. Jai suivi un BTSBrevet de technicien supérieur Informatique de Gestion (option développeur dapplication) et jai déjà travaillé pour une agence de création de site internet.
ajoutez un commentaire suivez-moi sur Facebook