Comment ajouter des videos Youtube & Vimeo responsives à n'importe quel site ?

Youtube, Vimeo et d'autres hébergeurs vidéos permettent d'intégrer facilement leur lecteurs dans votre site internet.

Toutefois, Youtube, Vimeo et autres ne fournissent pas de vidéos responsives par défaut.

Dans ce court tutoriel nous allons voire comment en utilisant quelques lignes de CSS l'on peut  rendre responsives des videos de Youtube, Vimeo ou autres.

 1. Obtenir le code d'insertion Youtube

• Rendez-vous sur Youtube
• Trouvez la vidéo que vous souhaitez  insérer dans votre site
• Cliquez sur Partager > Intégrer, faites un click droit et copiez le code HTML

2. Utiliser le code d'intégration

Copiez le code d'intégration dans votre site internet. Ce qui devrait ressembler à ceci : 

<iframe width="560" height="315" src="https://www.youtube.com/embed/Z0QZxJt4byQ" frameborder="0" allowfullscreen></iframe>

3. Modifier le code d'intégration

Ajoutez une balise <div> autour du code d'intégration. Ajoutez la class CSS video-responsive, le code ressemble maintenant à ceci :

<div class="video-responsive"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z0QZxJt4byQ" frameborder="0" allowfullscreen></iframe>
</div>

4. Ajouter le CSS

Maintenant ajoutez les propriétés suivantes dans votre fichier CSS.

.video-responsive {
 overflow:hidden;
 padding-bottom:56.25%; 
 position:relative;
 height:0;
}
.video-responsive iframe {
 left:0;
 top:0;
 height:100%;
 width:100%;
 position:absolute;
}

Votre vidéo est maintenant responsive. Redimensionnez votre navigateur pour le constater.

Le même processus peut être appliqué aux videos de Vimeo ou tout autre service qui utilise une balise iframe.

Cet article est la traduction de "Add Responsive YouTube and Vimeo Videos to Any Website" de Valentin Garcia.