[Article] Eteignez la lumière en regardant une vidéo grâce à jQuery

:salut:

Je vous propose une traduction de l'article anglophone : Use jQuery to "turn off the lights" while watching videos.
Certaines vidéos sur YouTube disposent d'une fonctionnalité assez sympa appelée "Turn the lights down". Lorsque vous cliquez, toute la page s'assombrit à l'exception de la vidéo et vous pouvez regarder la vidéo comme au cinéma. Ce tutoriel va vous montrer comment créer cet effet.

:fleche: Eteignez la lumière en regardant une vidéo grâce à jQuery

Bien entendu, n'hésitez pas à poster vos commentaires et remarques éventuels ;)

Pas mal mais un dev qui connait le JS ne devrait pas avoir
besoin de Jquery pour ça, même moi je pourrais pondre une
fonction équivalente avec un peu de persévérance :aie:

Tu as entièrement raison Erwan !
Cependant, le script résout selon moi avec jQuery au moins deux difficultés majeures :

• Récupérer facilement de façon cross-browser les dimensions exactes de la page pour obtenir un calque de superposition sans overflow.
• Si le script s'appuie sur le fait que la vidéo (balise object ou embed) sera toujours au-dessus du calque, récupérer facilement le lien et manipuler son style.

Ce qui reste effectivement accessible à un développeur JavaScript, mais cela m'amène à une question et une remarque :

• Y a-t-il tant de développeurs Web que ça qui connaissent réellement JavaScript ?
• Même quand on connait bien JavaScript, y a-t-il un moment où il est préférable d'utiliser un framework plutôt que de coder les équivalents (c-a-d : où est la limite contrainte / gain) ?

cross-browser ?

Ça marche bien avec Mozilla mais pas avec Internet Explorer 7, ça me fait un genre de dégradé bizarre (voir ici) et la lumière n'est pu cliquable. Peut-être qu'avec IE 8 ou 9 ça devrait fonctionner, faudrait le tester. Et c'est pourtant marqué sur jQuery.com que c'Est compatible IE 6 et +.

Citation:

---

Envoyé par Parrem

cross-browser ?

Ça marche bien avec Mozilla mais pas avec Internet Explorer 7, ça me fait un genre de dégradé bizarre (voir ici) et la lumière n'est pu cliquable. Peut-être qu'avec IE 8 ou 9 ça devrait fonctionner, faudrait le tester. Et c'est pourtant marqué sur jQuery.com que c'Est compatible IE 6 et +.

---

:oops:

Mea culpa...
J'avais même pas pensé à vérifier si ça fonctionnait sur IE :calim2:

Je vais essayer de regarder s'il est possible de rectifier cela...

Merci pour ce tutoriel, je trouve l'idée très intéressante.

Ma première impression était que l'auteur utilisait une méthode trop complexe. Certes, j'arrive à un résultat similaire avec le code ci-dessous, mais il ne fonctionne pas si on utilise les styles dans le HTML au lieu des CSS pour fixer le background-color d'un élément du DOM.

Code:

---

1 2 3 4

.ligthClass { color:black; background-color:black; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$("#lightOnOff").toggle( function(){ $("*").toggleClass("ligthClass"); $("img").css("visibility","hidden"); $(this).css("color","white"); }, function(){ $("*").toggleClass("ligthClass"); $("img").css("visibility","visible"); $(this).css("color","blue"); } );

---

Exemple : http://danielhagnoul.developpez.com/...ightOnOff.html

Citation:

---

Envoyé par Parrem

Et c'est pourtant marqué sur jQuery.com que c'Est compatible IE 6 et +.

---

jQuery est compatible oui, mais concernant ce que les utilisateurs en font il n'y a évidemment aucune garantie. :aie:

Super.