FitVids.js, plugin jQuery pour rendre vos vidéos « responsive »

20 août 2012

FitVids.js est un plugin jQuery permettant de rendre n’importe quelle vidéo « responsive », c’est-à-dire automatiquement redimensionnable en fonction de la largeur de son conteneur. Très pratique pour un webdesign réactif qui doit être compatible sur smartphone et tablette.

Une vidéo réactive

FitVids.js supporte plusieurs lecteurs vidéo, notamment YouTube et Vimeo, mais aussi des lecteurs moins connus comme Blip.tv, Viddler et Kickstarter. La vidéo prend automatiquement la largeur de son conteneur ; c’est donc à vous de définir cette valeur en pourcentage. Le redimensionnement fonctionne également lorsque la vidéo est en cours de lecture.

Le plugin n’est pas très paramètrable puisqu’il ne dispose que d’une seule option mais celle-ci est une grande utilité. En effet, customSelector donne la possibilité d’appliquer l’effet souhaité sur n’importe quelle iframe vidéo qui n’est pas prise en charge par défaut. C’est par exemple le cas du lecteur français Dailymotion. C’est donc un excellent moyen de tester la compatibilité d’un lecteur personnalisé.

Mise en place

L’installation est très simple. On commence par inclure jQuery et FitVids.js.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>

Ensuite on intègre notre vidéo avec le code fourni par YouTube dans un élément HTML conteneur.

<div class="container">
   <iframe width="560" height="315" src="http://www.youtube.com/embed/HAfFfqiYLp0" frameborder="0" allowfullscreen></iframe>
</div>

Comme expliqué précédemment, il faut penser à définir une largeur en pourcentage à ce conteneur.

.container {
   width: 70%;
}

Puis on fait l’appel jQuery sur le conteneur de la vidéo (qui n’est pas forcément le parent direct de celle-ci). Ainsi, toutes les vidéos situées dans cette balise seront « responsive ». Voici également un exemple d’utilisation de l’unique option pour rendre compatible le support de Dailymotion.

$(document).ready(function(){
   $(".container").fitVids();
   $(".container").fitVids({ customSelector: "iframe[src^='http://www.dailymotion.com']"});
});

Bref, FitVids.js est un excellent plugin jQuery qui s’inscrit parfaitement dans l’ère du temps et du Responsive webdesign.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE7+
Démonstration : http://fitvidsjs.com/
Licence : WTFPL

Commentaires

  • tdkelly17

    Or1s Recently I was extremely low on money and debits were eating me from all sides. That was Right Until i learned to earn money on the INTERNET! I visited surveymoneymaker p net, and started doing surveys for money, and doing so I have been far more able to pay my bills! i am very happy that I did this!! – VWzE