Afficher video Youtube responsive


Comment faire pour que ma vidéo soit responsive (s’auto-adapte à l’écran)?

C’est un vieux problème, que Youtube ne semble pas motivé à le résoudre pour l’instant, et pourtant ce serait logique vu l’ampleur du traffic mobiles et tablettes.

Pour résumer, Youtube (et d’autres plateformes de vidéos) de récupérer le code d’intégration (embed) à placer dans une page.

WordPress par défaut dispose d’une fonction intégrée d’intégration de vidéo. Mais lorsque cette intégration se fait hors d’un éditeur et en code, le problème persiste pour tous les webmasters qui proposent à leur client d’intégrer une vidéo: Le site est responsive, la video ne l’est pas. Youtube et consorts appliquent une taille en dur par défaut, il faut donc revoir le code pour rendre le lecteur vidéo flexible.

Exemple d’embed video « brut de youtube »:

On passerait logiquement en mode responsive à:

Et oui, la largeur est bonne, mais ni 100% en hauteur ni le mode « auto » ne marchent

Cependant, on peut appliquer la règle suivante en standard HTML5 depuis le CSS:


video {
max-width: 100%;
height: auto;
}

Pour aller plus loin, le mieux est encore de placer ce code dans la partie édition du css de votre template:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Et ensuite dans le widget lui même (ou d’ailleurs dans votre article/contenu):

div class="video-container"
iframe src="lienyoutube" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"
/iframe
/div

Notez le div qui applique le style. La taille est une « taille maxi » par défaut en mode desktop.

Des commentaires, des réactions ?

Laisser un commentaire

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