Als u merkt dat u op zoek bent naar mediawebsites, onlangs video-streamingdiensten, nieuwswebsites, Facebook enzovoort, heeft u misschien een trend opgemerkt met betrekking tot hun videospelers. Als we naar beneden scrollen op een pagina waar een video aanwezig is, zweeft en krimpt de speler en blijft deze aan de zijkant van de viewport hangen, in plaats van te verliezen..

Hierdoor kunnen gebruikers de video in de gaten houden terwijl ze tegelijkertijd de andere inhoud bekijken. In deze zelfstudie laat ik je zien hoe je dezelfde ervaring kunt recreëren, dus zonder verder oponthoud gaan we aan de slag!

Voorbeelden

Dus we staan ​​allemaal op dezelfde pagina, hier zijn een paar voorbeelden in het wild:

Entertainment Weekly verzendt de video's rechtsonder in de viewportCNN-video's zweven naar rechts

YouTube video toevoegen

Laten we om te beginnen de paginamarkering samen met een YouTube-video maken. Cruciaal is dat we de video insluiten met de enablejsapi = 1 parameter toegevoegd; Met deze parameter kunnen we met de video communiceren via de YouTube Iframe-API.

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

Aan de onderkant van de pagina, zoals u kunt zien, hebben we ook drie JavaScript-bestanden toegevoegd; namelijk jQuery, het script dat ons voorziet van de YouTube Iframe API, en de main.js waar we onze aangepaste JavaScript gaan schrijven.

styling

Je kunt de pagina op elke gewenste manier in model brengen, maar de stijlen waaraan we ons specifiek interesseren, zijn die welke gekoppeld zijn aan de YouTube-video. Eerst voegen we de stijlen toe om de YouTube-video responsief te maken. Deze regels zullen uiteindelijk ook de container mogelijk maken, .Inhoud-media - video, om de beeldverhouding te behouden wanneer de YouTube-video wordt verplaatst.

.inhoud-media - video achtergrondkleur: #ddd; weergave: blok; positie: relatief; opvulling: 0 0 56.25% 0;  .content-media - video iframe positie: absoluut; onderkant: 0; links: 0; breedte: 100%; hoogte: 100%; 

Zwevende videospelerstijlen

Onze volgende CSS-regels bepalen hoe de YouTube-video moet zweven. We gebruiken een selector .is-kleverige-, die we dynamisch aan de speler toevoegen met JavaScript, om de video op de pagina te laten zweven. Hiermee wordt de video ook op maat geschaald, links gepositioneerd en aangepast voor een aantal viewport-grootten.

# featured-video transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;  / ** Gebruik .sticky * / # featured-video.is-sticky positie: vast; top: 15px; links: auto; maximale breedte: 280 px; maximale hoogte: 158 px; breedte: 280 px; hoogte: 158 px;  @media-scherm en (min-breedte: 1120px) # featured-video.is-sticky transform: translateX (-80%);  @media-scherm en (min-breedte: 1300px) # featured-video.is-sticky transform: translateX (-115%);  

Notitie: u moet deze eigenschappen aanpassen (de grootte en de positie) in overeenstemming met uw doelgroep en de aard van uw website. Als de inhoud van uw website bijvoorbeeld van rechts naar links is geschreven, kan dit van invloed zijn op de plaats waar u uw videospeler het beste kunt plaatsen.

Wanneer we deze pagina laden, kunnen we zien dat de YouTube-video wordt weergegeven, samen met enkele van onze willekeurige inhoud.

JavaScript schrijven

We zijn tot het spannende deel van deze tutorial gekomen; JavaScript! Onze main.js bestandsinhoud op dit punt is als volgt:

jQuery (functie ($) // schrijf code hier.);

Dit bovenstaande fragment komt overeen met de $ (Document) .ready (), waarmee we JavaScript kunnen uitvoeren zodra alle elementen op de pagina zijn geparseerd en beschikbaar zijn.

Vervolgens definiëren we een aantal variabelen. Ik heb inline opmerkingen aan de zijkant van elke variabele toegevoegd om uit te leggen wat er aan de hand is.

var $ window = $ (window); // 1. Vensterobject. var $ featuredMedia = $ ("# featured-media"); // 1. De videocontainer. var $ featuredVideo = $ ("# featured-video"); // 2. De YouTube-video. var speler; // 3. Object YouTube-speler. var top = $ featuredMedia.offset (). top; // 4. De videopositie vanaf de bovenkant van het document; var offset = Math.floor (top + ($ featuredMedia.outerHeight () / 2)); // 5. compenseren.

YouTube Iframe API

Zoals eerder vermeld, hebben we het JavaScript-bestand toegevoegd dat toegang biedt tot de YouTube Iframe-API. Deze API, eenmaal geladen, activeert een functie met de naam onYouTubeIframeAPIReady. Deze functie is wereldwijd beschikbaar. En aangezien ons script is genest onder de jQuery (functie ($) );, we moeten deze functie bereiken in de venster object, als volgt:

window.onYouTubeIframeAPIReady = function () player = nieuwe YT.Player ("featured-video", events: "onStateChange": onPlayerStateChange); ;

Zoals u kunt zien binnen de functie, hebben we het ID-kenmerk van de functie geselecteerd iframe evenals het doorgeven van een functie met de naam onPlayerStateChange. Deze functie wordt geactiveerd wanneer de YouTube-videospeler wordt afgespeeld, gepauzeerd of beëindigd.

De onPlayerStateChange geeft een Event-object door dat ons bruikbare stukjes gegevens oplevert. In dit geval zullen we bijvoorbeeld het evenement gebruiken .gegevens object om de videostatus te krijgen.

De videostatus, zoals u hieronder kunt zien, wordt weergegeven met een nummer; 1 is wanneer de video wordt afgespeeld, 2 is wanneer de video is gepauzeerd, en 3 is wanneer de video eindigt. We zullen een klassenaam dienovereenkomstig toevoegen en verwijderen wanneer de status wordt gewijzigd.

/ ** * Uitvoeren wanneer de YouTube-videostatus (afspelen, pauzeren, enzovoort) is gewijzigd. * * @param Object -gebeurtenis Het YouTube-objectgebeurtenis. * @return Void * / function onPlayerStateChange (event) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if (isPlay) $ featuredVideo.removeClass ("is-paused"); $ featuredVideo.toggleClass ("is-playing");  if (isPause) $ featuredVideo.removeClass ("is-playing"); $ featuredVideo.toggleClass ("is gepauzeerd");  if (isEnd) $ featuredVideo.removeClass ("is-playing", "is-paused"); 

Zweven en de video plakken

Wat volgt is de code om te zweven en onze videospeler vast te houden. Het is vermeldenswaard dat we de video alleen moeten zwevend maken als de video wordt afgespeeld. Daarom controleren we eerst het iframe om te zien of het de speelt klasse voordat je de is-kleverige klasse:

$ window .on ("resize", functie () 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 ")););

Test wat je hebt gedaan en je zou dingen zien werken!

Laatste demo

Conclusie

Werden gedaan! Deze zelfstudie is bedoeld om u op weg te helpen en geeft u de basisprincipes van hoe u een video kunt laten zweven op dezelfde manier als op mediawebsites die u mogelijk hebt gezien. We hebben jQuery gebruikt om de code eenvoudiger, korter en begrijpelijker te maken voor lezers in het algemeen.

In een echt project zul je waarschijnlijk hier en daar de details moeten aanpassen, afhankelijk van de complexiteit van het project. U wilt bijvoorbeeld de schuiffunctie gebruiken in een Throttling-functie om functieaanroepen te verminderen. Mogelijk moet u ook de videopositie en -grootte aanpassen volgens de sitelay-out op een mobiel apparaat, enzovoort.

Bekijk toch de demo, speel de video af en ga scrollen!