Rendre les vidéos YouTube et Viméo responsives

Vous avez intégré une vidéo Youtube ou Viméo sur votre site et malheureusement celle-ci s’affiche mal sur smartphone ? Voilà un tutoriel pour les rendre élastiques et responsives.

Problématique

Quand vous importez une vidéo YouTube ou Viméo, vous devez spécifier une taille qui se retrouve dans le code embed :

<iframe width="960" height="540" src="https://www.youtube.com/embed/I1188GO4p1E?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Pour cet exemple, je vais prendre une vidéo Youtube de 960px par 540px.
Si maintenant je regarde cette vidéo sur un petit écran, elle va sortir du cadre :

Vous pouvez voir que la vidéo calée pour un écran (à gauche) sort du cadre sur un écran de smartphone (à droite).

Solution

La solution consiste à créer un cadre au format 16/9 (.video-container) qui va épouser la forme de son conteneur (en bleu dans mon schéma).
Ensuite, on demandera à la vidéo de se caler parfaitement dans ce container pour pas qu’elle n’en déborde :

Notre div.video-container en format 16/9 est responsive.

Le code

Premièrement, j’englobe mon iframe d’une div nommée .video-container qui aura un ratio 16/9 :

<div class="video-container">
	<iframe width="960" height="540" src="https://www.youtube.com/embed/I1188GO4p1E?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Ensuite, je lui applique ce code en .css :

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
    height: 0; overflow: hidden;
    clear: both;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Et voilà, votre vidéo est maintenant responsive !

Les ratios

Si votre vidéo a un autre ratio que 16/9, des bandes noires vont apparaitre.
Pour changer le ratio de votre div, il suffit de changer le padding :

.video-container {
    padding-bottom: 75%; /* ratio 4/3 */
}
.video-container {
    padding-bottom: 100%; /* ratio 1/1 */
}
.video-container {
    padding-bottom: 66.66%; /* ratio 3/2 */
}
.container {
    padding-bottom: 62.5%; /* 8/5 Aspect Ratio */
}

Aller plus loin : automatiser le process

Cette solution est toute simple, mais cela peut rapidement être fastidieux de rajouter à la main une div qui englobe toutes vos vidéos, surtout si vous en avez beaucoup sur votre site.
Voilà un bout de code javascript qui va automatiquement créer ces div autour des objets suivants :

  • iframe
  • object
  • embed
$( "iframe" ).wrap( "<div class='video-container'></div>" );
$( "object" ).wrap( "<div class='video-container'></div>" );
$( "embed" ).wrap( "<div class='video-container'></div>" );

Et voilà, maintenant toutes vos vidéos sont responsives !

See ya’ space integrateur

Crédit : Get swifty de Rick et Morty

109

Auteur : PUShAUNE

Graphiste freelance, J'ai créé un collectif à Marseille appelé Bison Bleu. Je tiens un blog pour partager mes techniques et mes expériences. Je donne aussi des cours aux élèves de l’école Axe Sud.

À ton tour de participer :

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