12/06/2017: 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":
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 ?