Comment créer une vidéo flottante «collante» dans un défilement de page

Si vous vous êtes déjà retrouvé à naviguer sur des sites Web multimédias (services de streaming vidéo, sites d’information, Facebook, etc.), vous avez peut-être remarqué une tendance concernant leurs lecteurs vidéo. Si nous faisons défiler une page contenant une vidéo, celle-ci flottera et réduira le lecteur, la collant sur le côté de la fenêtre au lieu de la perdre de la vue..

Cela permet aux utilisateurs de garder un œil sur la vidéo tout en parcourant l’autre contenu en même temps. Dans ce tutoriel, je vais vous montrer comment recréer la même expérience. Alors sans plus tarder, commençons!

Exemples

Pour que nous soyons tous sur la même page, voici quelques exemples à l'état sauvage:

Entertainment Weekly envoie ses vidéos en bas à droite de la fenêtre

Les vidéos de CNN flottent vers la droite

Ajout d'une vidéo YouTube

Pour commencer, construisons le balisage de page avec une vidéo YouTube. Surtout, nous intégrons la vidéo avec le enablejsapi = 1 paramètre ajouté; ce paramètre nous permettra d'interagir avec la vidéo via l'API Youtube Iframe.

   Lorem ipsum dolor sit amet.
 Lorem ipsum dolor sit amet, consectetur elipisicing elit. Tenetur, minima!

Comme vous pouvez le constater, au bas de la page, 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é.

Coiffant

Vous pouvez styler la page comme vous le souhaitez, mais les styles qui nous intéressent plus particulièrement 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, .contenu-média - vidéo, conserver ses proportions lorsque la vidéo YouTube est repositionnée.

.content-media - video background-color: #ddd; bloc de visualisation; position: relative; rembourrage: 0 0 56,25% 0;  .content-media - video iframe position: absolute; en bas: 0; gauche: 0; largeur: 100%; hauteur: 100%;

Styles de lecteur vidéo flottant

Nos prochaines règles CSS définissent la manière dont la vidéo YouTube doit flotter. Nous utilisons un sélecteur .est collant-, que nous ajouterons dynamiquement au lecteur avec JavaScript, pour faire flotter la vidéo sur la page. Cela réduira également la taille de la vidéo, la positionner à gauche et l'ajuster à quelques tailles de fenêtre..

# sélectionnée-vidéo transition: largeur .2s, entrée / sortie en hauteur, hauteur .2s, entrée / sortie, transformation .38s, sortie en douceur;  / ** Utilisez .sticky * / # Featured-video.is-Sticky position: fixed; en haut: 15px; gauche: auto; largeur maximale: 280px; hauteur maximale: 158px; largeur: 280px; hauteur: 158px;  @ Écran multimédia et (largeur minimale: 1120 pixels) # vedette-vidéo.is-collant transformation: traduireX (-80%);  @ Écran multimédia et (largeur minimale: 1300 pixels) # vedette-vidéo.is-collant transformation: traduireX (-115%);

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 avoir une incidence sur l'emplacement de votre lecteur vidéo..

Maintenant, lorsque nous chargeons cette page, nous pouvons voir que la vidéo YouTube est affichée avec certains de nos contenus arbitraires.

Écriture JavaScript

Nous sommes arrivés à la partie excitante de ce tutoriel; le JavaScript! Notre main.js le contenu du fichier à ce stade est le suivant:

jQuery (function ($) // Écrivez le code ici.);

Cet extrait correspond à la $ (document) .ready (), ce qui nous permet d'exécuter JavaScript une fois que tous les éléments de la page ont été analysés et sont 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.

var $ fenêtre = $ (fenêtre); // 1. Objet Window. var $ FeaturedMedia = $ ("# Featured-Media"); // 1. Le conteneur vidéo. var $ FeaturedVideo = $ ("# vedette-vidéo"); // 2. La vidéo Youtube. var player; // 3. Objet du lecteur Youtube. var top = $ sélectionnéeMedia.offset (). top; // 4. La position de la vidéo à partir du haut du document; var offset = Math.floor (top + ($ FeaturedMedia.outerHeight () / 2)); // 5. décalage.

API Youtube Iframe

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

window.onYouTubeIframeAPIReady = function () player = new YT.Player ("vedette-vidéo", événements: "onStateChange": onPlayerStateChange); ;

Comme vous pouvez le voir dans la fonction, nous avons sélectionné l’attribut ID du iframe ainsi que de passer une fonction nommée onPlayerStateChange. Cette fonction sera déclenchée lorsque le lecteur vidéo YouTube est lu, en pause ou terminé..

le onPlayerStateChange passe un objet Event qui nous fournit des données utilisables. Dans ce cas, par exemple, nous utiliserons l’événement .Les données objet pour obtenir l'état de la vidéo.

Comme vous pouvez le voir ci-dessous, l'état de la vidéo est représenté par un numéro; 1 est quand la vidéo joue, 2 est quand la vidéo est en pause, et 3 est quand la vidéo se termine. Nous allons ajouter et supprimer un nom de classe en conséquence lorsque l'état est modifié.

/ ** * Exécuté lorsque l'état de la vidéo Youtube (lecture, pause, etc.) est modifié. * * @param Object event L'événement objet Youtube. * @return Void * / function onPlayerStateChange (event) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if (isPlay) $ sélectionnéeVideo.removeClass ("est-en pause"); $ sélectionnéeVideo.toggleClass ("est en train de jouer");  if (isPause) $ FeaturedVideo.removeClass ("is-playing"); $ sélectionnéeVideo.toggleClass ("est en pause");  if (isEnd) $ FeaturedVideo.removeClass ("est en train de jouer", "est en pause");

Flottant et collant la vidéo

Ce qui suit est le code pour flotter et coller notre lecteur vidéo. Il est à noter que nous ne devrions laisser flotter la vidéo que lorsque celle-ci est en cours de lecture. Par conséquent, nous vérifions d’abord l’iframe pour voir s’il a la est en train de jouer classe avant d'ajouter le est collant classe:

$ window .on ("redimensionner", fonction () top = $ FeaturedMedia.offset (). top; offset = Math.floor (top + ($ FeaturedMedia.outerHeight () / 2));) .on (" scroll ", function () $ FeaturedVideo.toggleClass (" is-sticky ", $ window.scrollTop ()> offset && $ FeaturedVideo.hasClass (" is-playing ")););

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

Démo finale

Conclusion

Avaient fini! Ce tutoriel avait pour but de vous aider à démarrer, en vous expliquant comment créer une vidéo de manière similaire aux sites Web de média que vous avez peut-être vus. Nous avons utilisé jQuery pour rendre le code plus simple, plus court et plus facile à comprendre pour les lecteurs en général..

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

Néanmoins, regardez la démo, visionnez la vidéo et défilez!

Création de sites web