Mon Curriculum Vitae Me contacter Facebook
En savoir plus sur l'auteur
Découvrez ma présentation avec mon parcourt dans le domaine du développement web et de la création de sites internet ainsi que l'objet de ce site Tyma-Web... lire la suite ->
Partagez cette page

Recommandations
Livres
- Concevez votre site web avec PHP et MySQL
- CSS 2 : Pratique du design web

Logiciel
- FileZilla
- Paint.NET

Sites internet
- Google Analytics nouveau
- WebRankInfo

voir toutes mes recommandations
Statistiques
- 7 réalisations
- 12 recommandations
- 23 articles
- 2 commentaires
- 8 fans

article Articles > Astuces > Problème du wmode dans les vidéos

Problème du wmode dans les vidéos

Vue8564
Par Tyma Suivez Tyma-Web sur Facebook le 17/04/2012 à 11:56 dans la catérogie Astuces

Problème du wmode dans les vidéosLors 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).

Problème du wmode dans les vidéos Youtude et Dailymotion
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.

Problème du wmode dans les vidéos Youtude et Dailymotion
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).

Problème du wmode sur l'agrandissement d'une photo Correction du wmode sur l'agrandissement d'une photo avec l'ajout du paramètre sur la vidéo


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 l’auteur : Tyma

Tyma, développeur web amateur ChartresDé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. J’ai suivi un BTSBrevet de technicien supérieur Informatique de Gestion (option développeur d’application) et j’ai déjà travaillé pour une agence de création de site internet.


Ajoutez un commentaire ajoutez un commentaire  Suivez-moi sur Facebook suivez-moi sur Facebook

Commentaires de l'article Commentaires


Ajouter un nouveau commentaire à l'article

*

*

* (non publiée)


*

*



retour à la liste des articles

© 2011-2013 Tyma-Web. Tous droits réservés. À propos | Plan du site | Me contacter | Liens | Forum photo Clic-Clac Réalisation Tyma-Web