Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Comment créer une vidéo flottante "collante" sur le rouleau de page

by
Difficulty:IntermediateLength:ShortLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Si vous vous êtes retrouvé en parcourant des sites Web de médias récemment–des services de streaming vidéo, des sites de nouvelles, Facebook et ainsi de suite–vous auriez peut-être remarqué une tendance concernant leurs lecteurs vidéo. Si nous défilons vers le bas d'une page où une vidéo est présente, elle va flotter et rétrécir le lecteur, le collant sur le côté de la fenêtre au lieu de perdre de vue.

Cela permet aux utilisateurs de garder un oeil sur la vidéo, tout en regardant à travers les autres contenus en même temps. Dans ce tutoriel, je vais vous montrer comment recréer la même expérience–donc sans plus tarder, commençons!

Exemples

Juste pour que nous soyons tous sur la même page, voici quelques exemples dans la nature:

Entertainment Weekly
Entertainment Weekly envoie ses vidéos en bas à gauche de la fenêtre
CNN
Les vidéos CNN flottent vers la droite

Ajout de vidéos YouTube

Pour commencer, construisons le balisage de page avec une vidéo YouTube. De façon cruciale, nous incorporons la vidéo avec le paramètre enablejsapi=1 ajouté; ce paramètre nous permettra d'interagir avec la vidéo via l'API Youtube Iframe.

Au bas de la page, comme vous pouvez le voir, nous avons également ajouté trois fichiers JavaScript; à savoir jQuery, le script qui nous fournit l'API Youtube Iframe, et le main.js où nous allons écrire notre JavaScript personnalisé.

Créer un style

Vous pouvez créer un style de la page comme vous le souhaitez, mais les styles qui nous intéressent particulièrement ici sont ceux liés à la vidéo YouTube. Tout d'abord, nous ajoutons les styles pour rendre la vidéo YouTube réactive. Ces règles permettront également au conteneur, .content-media--video, de conserver son rapport d'aspect lorsque la vidéo YouTube est repositionnée.

Styles de lecteur vidéo flottants

Nos prochaines règles CSS définissent la façon dont la vidéo YouTube doit flotter. Nous utilisons un sélecteur .is-sticky-, que nous ajouterons au lecteur dynamiquement avec JavaScript, afin de faire flotter la vidéo sur la page. Cela réduira également la taille de la vidéo, la positionnera à gauche et la réglera pour quelques tailles de fenêtre.

Remarque: vous devez ajuster ces propriétés (la taille et la position) en fonction de votre public et de la nature de votre site Web. Si, par exemple, le contenu de votre site Web est écrit de droite à gauche, cela pourrait affecter l'endroit où vous pensez le mieux placer votre lecteur vidéo.

Maintenant, lorsque nous chargeons cette page, nous pouvons voir la vidéo YouTube est affiché avec certains de notre contenu arbitraire.

Écriture de JavaScript

Nous sommes venus à la partie passionnante de ce tutoriel; le JavaScript! Notre contenu du fichier main.js est le suivant:

Cet extrait ci-dessus équivaut au $(document).ready(), qui nous permet d'exécuter JavaScript une fois que tous les éléments de la page ont été analysés et disponibles.

Ensuite, nous définissons un certain nombre de variables. J'ai ajouté des commentaires en ligne sur le côté de chaque variable, pour expliquer ce qui se passe.

API Youtube Iframe

Comme mentionné précédemment, nous avons ajouté le fichier JavaScript qui permet d'accéder à l'API Iframe YouTube. Cette API, une fois chargée, déclenchera une fonction nommée onYouTubeIframeAPIReady. Cette fonction est disponible au niveau global. Et puisque notre script est imbriqué sous jQuery( function ( $ )  { });, nous devons atteindre cette fonction dans l'objet window, comme suit:

Comme vous pouvez le voir dans la fonction, nous avons sélectionné l'attribut ID de l'iframe ainsi que le passage d'une fonction nommée onPlayerStateChange. Cette fonction est déclenchée lorsque le lecteur vidéo YouTube est lu, mis en veille ou arrêté.

Le OnPlayerStateChange passe un objet Event qui nous fournit des données utilisables. Dans ce cas, par exemple, nous utiliserons l'objet Event .data pour obtenir l'état du vidéo.

L'état du vidéo, comme vous pouvez le voir ci-dessous, est représenté par un nombre; 1 est lorsque la vidéo est en cours de lecture, 2 lorsque la vidéo est mise en pause et 3 lorsque la vidéo se termine. Nous allons ajouter et supprimer un nom de classe en conséquence lorsque l'état est modifié.

Flotter et coller la vidéo

Ce qui suit est le code pour flotter et coller notre lecteur vidéo. Il est intéressant de noter que nous ne devrions flotter la vidéo que lorsque la vidéo est en cours de lecture. Par conséquent, nous vérifions d'abord l'iframe pour voir s'il a la classe is-playing avant d'ajouter la classe is-sticky:

Testez ce que vous avez fait et vous devriez voir les choses fonctionner!

Floating video demo
Démonstration finale

Conclusion

On a finis! Ce tutoriel avait pour but de vous aider à démarrer, vous donnant les bases de la façon de flotter une vidéo de manière similaire aux sites Web des médias que vous avez pu voir. Nous avons utilisé jQuery pour rendre le code plus simple, plus court et plus facile à comprendre pour les lecteurs en général.

Dans un projet réel, cependant, vous devrez probablement peaufiner les détails ici et là en fonction de la complexité du projet. Par exemple, vous pouvez exécuter la fonction de défilement dans une fonction de limitation pour réduire les appels de fonction. Vous devrez peut-être également ajuster la position et la taille de la vidéo à la suite de la disposition du site sur un appareil mobile, et ainsi de suite.

Néanmoins, consultez la démo, jouez la vidéo et obtenez le défilement!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.