◄ Retour

Des vidéos Responsive une fois pour toutes
Rubrique Ressources Langages Web
Astuce pour permettre aux vidéos intégrées sur votre site (Youtube, Facebook, etc.) de s'adapter automatiquement aux différents formats d'écran sans modifier le code à chaque fois


Responsive vidéosPréambule

Certes, on trouve aisément déjà réponses au problème des vidéos Responsive sur le net, des pages par dizaine.

Si les solutions exposées expliquent comment une vidéo va pouvoir se réajuster selon la taille de l'écran, c'est néanmoins à condition que vous mettiez les mains dans le code à chaque nouvelle intégration.
Idem pour corriger tous les articles existants qui contiennent une vidéo.

En outre, dans le cadre d'une insertion vidéo via l'éditeur wysiwyg d'un CMS, il n'est pas forcément possible ou même aisé d'éditer le code source de l'article afin d'y ajouter systématiquement les quelques lignes de code qui permettront ce réajustement. Et quand bien même, c'est juste agaçant d'avoir à le faire à chaque article.

Pour ma part, même pas en rêve.

Reprenons la base

Lorsqu'on insère une vidéo Youtube sur son site ou dans un article via un éditeur en ligne, une taille de base est définie (width/height), taille que vous pouvez bien-sûr réajuster au moment de l'intégration.

Exemple du code fourni par Youtube :

<iframe width="720" height="410" src="https://www.youtube.com/embed/Ms--O39uzFs" frameborder="0" gesture="media" allowfullscreen></iframe>
Le fait est que dans le cadre d'un site Responsive Design, ladite vidéo ne s'ajustera pas puisque sa taille est fixée par l'iframe; ici 720 pixels de large. Du coup, si l'écran est d'une taille inférieure à cette valeur, ça dépasse...

Mes premières recherches se concentraient sur une solution pure CSS. Je ne suis pas contre Javascript, au contraire; mais en règle général, si je peux m'en passer, je le fais.

Solution pure CSS

La solution qui m'a convaincu pour sa simplicité part du principe d'encapsuler l'iframe dans un conteneur DIV qui soit capable de s'ajuster à son environnement et de forcer l'iframe à en faire de même. En ce qui me concerne, la première étape a donc été d'ajouter ces quelques lignes à ma feuille de style générale :
.video-container {
position:relative;
margin:0 auto;
padding-bottom:56.25%; /* ratio 16:9 */
padding-top:30px;
height:0;
overflow:hidden
}
.video-container iframe {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
}

Ensuite, il suffit "d'entourer" le code fourni par Youtube avec une balise DIV, ayant pour classe le sélecteur créé : video-container

<div class="video-container"><iframe width="720" height="410" src="https://www.youtube.com/embed/Ms--O39uzFs" frameborder="0" gesture="media" allowfullscreen></iframe></div>
Plutôt simple à mettre en place et ça fonctionne parfaitement.
- Testez le résultat en live : ouvrez cette page et redimensionnez votre navigateur pour voir le résultat.

Mais comme expliqué en introduction, ça induit qu'on ajoute cette balise DIV à chaque fois et surtout, qu'on retourne corriger les éventuels articles existants qui ne l'ont pas. Pas drôle.

JQuery Le coup d'pouce de JQuery

Pour pallier à cette fainéantise, JQuery est notre ami !
Il faut bien-sûr que la bibliothèque soit appelée quelque part dans votre page :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Si tel est le cas, l'ajout de la ligne ci-dessous va automatiquement "entourer" d'une balise DIV avec la classe [video-container] toutes les iframes ayant pour url "youtube.com" :

$('iframe[src*="youtube.com"]').wrap('<div class="video-container" />')
Voilà, le tour est joué. Toutes vos vidéos intégrées provenant de Youtube, existantes ou à venir, seront automatiquement réajustées tout en gardant le ratio largeur/hauteur d'origine et sans s'occuper du reste.

Et pour les vidéos provenant de Facebook ?

Même principe, on change simplement l'url de référence :

$('iframe[src*="facebook.com/plugins/video"]').wrap('<div class="video-container" />')
Testez le résultat en live : ouvrez cette page et redimensionnez votre navigateur pour voir le résultat.

Et selon la même logique, vous pouvez en faire de même pour Daylymotion, Viméo, etc… afin que l'ensemble de vos intégrations, toutes plateformes confondues, soient automatiquement "Responsive".

Thomas Hsb
Creative self-taught

  Facebook Share Pinterest Twitter Google LinkedIn