Allofthelights.js, éteindre la lumière lorsqu’on regarde une vidéo avec jQuery

12 septembre 2012
3 621 vues

Allofthelights.js est un plugin jQuery, développé par mes soins, qui permet d’éteindre la lumière sur votre site web lorsque vous regardez une vidéo. Une manière simple et originale de mettre en avant une vidéo et de proposer aux spectateurs des conditions confortables à la lecture, un peu comme dans un cinéma.

Que la lumière… ne soit plus

Allofthelights.js fonctionne avec toutes les iframes vidéo (YouTube, Vimeo, Dailymotion, etc), et plus largement avec n’importe quel élément HTML. Il existe une dizaine d’options pour configurer le plugin : vous pouvez personnaliser le background (couleur, opacité), contrôler la vitesse d’animation de type ‘fade’, rendre la vidéo responsive grâce à FitVids.js (elle s’adapte alors automatiquement à son conteneur dans les limites du lecteur utilisé), définir le z-index exact du background, ou encore personnaliser totalement le style CSS des interrupteurs on / off.

Vidéo avec la lumière allumée

Vidéo avec la lumière éteinte

C’est un plugin que j’ai créé pour un projet professionnel. Au départ, mon script se contentait de créer une div unique qui venait recouvrir le site, puis par un jeu de z-index faisait apparaitre la vidéo au premier plan. Mais j’ai rencontré plusieurs problèmes avec cette technique, notamment en fonction du lecteur. J’ai donc opté pour une autre solution : calculer la position de la vidéo et générer quatre div qui viennent se positionner autour de l’iframe. Leur position et leur taille sont recalculées à chaque clic de l’interrupteur et à chaque resize.

Les options

Voici la liste des 11 paramètres qui vous permettront de contrôler l’effet désiré. A noter qu’il n’y a pas encore d’option permettant de définir une image repeat sur le background ; en effet cela peut pourrait poser problème en fonction du motif utilisé, étant donné que le fond est composé de plusieurs ‘div’.

  • color : définit la couleur du background (‘#000000′ par défaut)
  • opacity : définit l’opacité du backgroud (‘0.9′ par défaut)
  • z_index : définit le z-index du background
  • switch_id : définit l’id CSS de l’interrupteur (‘switch’ par défaut)
  • animation : définit le type d’animation (‘fade’ ou ‘none’, ‘fade par défaut)
  • delay_turn_on : définit la vitesse de transition de l’état off à l’état on (400 par défaut)
  • delay_turn_off : définit la vitesse de transition de l’état on à l’état off (400 par défaut)
  • scrolling : définit si le scrolling doit rester activé (true par défaut)
  • clickable_bg : définit si le background doit être cliquable pour rallumer la lumière (false par défaut)
  • is_responsive : définit si la vidéo doit être responsive (true par défaut)
  • custom_player : si is_responsive est à true, définit une liste de lecteurs vidéo personnalisés

Utilisation du plugin

On commence par inclure jQuery (version 1.7+ requise) et Allofthelights.js (JS et CSS) comme ceci :

<link rel="stylesheet" href="stylesheets/jquery.allofthelights.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.allofthelights.js"></script>

Ensuite, placez votre iframe vidéo (YouTube par exemple) sur votre site, avec un id CSS. Puis définissez une div qui va faire office d’interrupteur. Cette dernière peut être placée n’importe où sur votre document, pas forcément dans le même conteneur que la vidéo, mais elle doit avoir le même id CSS que le paramètre switch_id (« switch » par défaut).

<div id="switch"></div>
<iframe id="video" src="http://www.youtube.com/embed/HAfFfqiYLp0" allowfullscreen="" frameborder="0" height="338" width="600"></iframe>

Et enfin on termine avec la partie jQuery, c’est-à-dire l’appel du plugin avec l’id de la vidéo en sélecteur. Libre à vous de personnaliser l’interrupteur.

$(document).ready(function() {
    $("#video").allofthelights();
});

Allofthelights.js est un plugin jQuery simple pour ajouter une petite touche de confort, très pratique pour un site spécialisé dans la vidéo comme par exemple une WebTV. Une idée d’amélioration serait d’implémenter deux fonctions de callback afin de déclencher des événements sur chaque état. Bref, retrouvez plus d’informations sur le site du plugin.

[EDIT] : Allofthelights.js est désormais disponible en version 2.0 avec prise en charge de plusieurs vidéos et fonctions de callback.

Requis : jQuery 1.7+
Compatibilité : Firefox, Chrome, Opera, Safari, IE7+
Démonstration : http://www.megaptery.com/allofthelights/
GitHub : https://github.com/Pierrinho/Allofthelights.js
Licence : MIT

Commentaires

  • http://www.facebook.com/people/Mickaël-Sylvestre/1543536824 Mickaël Sylvestre

    Joli travail !

  • http://twitter.com/mathrobin mathrobin

    Pour info, ton plugin sera présent dans ma prochaine chronique, publiée demain normalement ;)

  • Remy

    Bonjour,
    Ton plugin a l’air pas mal mais comment fait-on pour l’installer sur WordPress ?
    Merci d’avance

    • http://www.megaptery.com/ Pierre

      Pas de plugin WP. Il faut mettre les mains dans le code ;-)