blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

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

responsives videos

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>

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.

4.8 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.80 (5 Votes)

Commentaires (1)

This comment was minimized by the moderator on the site

Super simple et efficace !!! Merci (Après avoir testé 4 codes inutiles)

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites