Se ti sei ritrovato a navigare di recente sui siti web dei media: servizi di streaming video, siti Web di notizie, Facebook e così via, potresti aver notato una tendenza riguardante i loro lettori video. Se scorriamo verso il basso una pagina in cui è presente un video, fluttuerà e restringerà il lettore, attaccandolo al lato del viewport invece di perderlo dalla vista.

Ciò consente agli utenti di tenere d'occhio il video, mentre guarda contemporaneamente all'altro contenuto. In questo tutorial ti mostrerò come ricreare la stessa esperienza, quindi senza ulteriori indugi, iniziamo!

Esempi

Solo così siamo tutti sulla stessa pagina, ecco un paio di esempi in natura:

Entertainment Weekly invia i suoi video in basso a destra nella visualizzazioneI video della CNN fluttuano a destra

Aggiunta di video di YouTube

Per cominciare, costruiamo il markup della pagina insieme a un video di YouTube. Fondamentalmente, incorporiamo il video con enablejsapi = 1 parametro aggiunto; questo parametro ci permetterà di interagire con il video attraverso l'API di Iframe di Youtube.

 
  
Lorem ipsum dolor sit amet.
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minimi!
  
  
   
 
 
 
    

Nella parte inferiore della pagina, come puoi vedere, abbiamo aggiunto anche tre file JavaScript; vale a dire jQuery, lo script che ci fornisce l'API di Iframe di Youtube e il main.js dove scriveremo il nostro JavaScript personalizzato.

Messa in piega

Puoi modellare la pagina come preferisci, ma gli stili che ci interessano sono quelli legati al video di YouTube. Innanzitutto, aggiungiamo gli stili per rendere il video di YouTube reattivo. Queste regole alla fine abiliteranno anche il contenitore, .content-media - il video, per mantenere le proporzioni quando il video di YouTube viene riposizionato.

.contenuto-media - video background-color: #ddd; blocco di visualizzazione; posizione: relativa; riempimento: 0 0 56,25% 0;  .content-media - iframe video position: absolute; fondo: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; 

Stili di video player mobili

Le nostre prossime regole CSS definiscono come dovrebbe fluttuare il video di YouTube. Stiamo usando un selettore .è appiccicosa-, che aggiungeremo al giocatore in modo dinamico con JavaScript, per far fluttuare il video sulla pagina. Questo ridurrà anche il video a dimensioni ridotte, lo posizionerà a sinistra e lo regolerà per un paio di dimensioni di viewport.

# featured-video transition: width .2s easy-in-out, height .2s easy-in-out, transform .38s easy-in-out;  / ** Usa .sticky * / # featured-video.is-sticky position: fixed; inizio: 15px; a sinistra: auto; larghezza massima: 280 px; altezza massima: 158 px; larghezza: 280 px; altezza: 158 px;  @media screen e (min-width: 1120px) # featured-video.is-sticky transform: translateX (-80%);  @media screen e (min-width: 1300px) # featured-video.is-sticky transform: translateX (-115%);  

Nota: dovresti modificare queste proprietà (la dimensione e la posizione) in base al tuo pubblico e alla natura del tuo sito web. Se, ad esempio, il contenuto del tuo sito web è scritto da destra a sinistra, ciò potrebbe influire su dove ritieni opportuno posizionare il tuo lettore video.

Ora quando carichiamo questa pagina possiamo vedere che il video di YouTube viene visualizzato insieme ad alcuni dei nostri contenuti arbitrari.

Scrivere JavaScript

Siamo arrivati ​​alla parte eccitante di questo tutorial; il JavaScript! Nostro main.js il contenuto del file a questo punto è il seguente:

jQuery (funzione ($) // Scrivi codice qui.);

Questo frammento sopra equivale al $ (Document) .ready (), che ci consente di eseguire JavaScript una volta che tutti gli elementi della pagina sono stati analizzati e disponibili.

Successivamente, definiamo un numero di variabili. Ho aggiunto commenti in linea sul lato di ogni variabile, per spiegare cosa sta succedendo.

var $ window = $ (finestra); // 1. Oggetto finestra. var $ featuredMedia = $ ("# featured-media"); // 1. Il contenitore video. var $ featuredVideo = $ ("# featured-video"); // 2. Il video di Youtube. giocatore di var; // 3. Oggetto lettore Youtube. var top = $ featuredMedia.offset (). top; // 4. La posizione del video dalla parte superiore del documento; var offset = Math.floor (top + ($ featuredMedia.outerHeight () / 2)); // 5. compensare.

API Iframe di Youtube

Come accennato in precedenza, abbiamo aggiunto il file JavaScript che fornisce l'accesso all'API Iframe di YouTube. Questa API, una volta caricata, attiverà una funzione chiamata onYouTubeIframeAPIReady. Questa funzione è disponibile a livello globale. E dal momento che il nostro script è annidato sotto il jQuery (function ($) );, dobbiamo raggiungere questa funzione nel finestra oggetto, come segue:

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

Come puoi vedere all'interno della funzione, abbiamo selezionato l'attributo ID di iframe oltre a passare una funzione chiamata onPlayerStateChange. Questa funzione verrà attivata quando il video player di YouTube viene riprodotto, messo in pausa o terminato.

Il onPlayerStateChange passa un oggetto Event che ci fornisce pezzi di dati utilizzabili. In questo caso, ad esempio, useremo l'evento .dati oggetto per ottenere lo stato del video.

Lo stato del video, come puoi vedere sotto, è rappresentato da un numero; 1 è quando il video è in riproduzione, 2 è quando il video è in pausa, e 3 è quando il video finisce. Aggiungeremo e rimuoveremo un nome di classe di conseguenza quando lo stato viene modificato.

/ ** * Esegui quando viene modificato lo stato del video di Youtube (riproduzione, pausa, ecc.). * * @param Oggetto evento L'evento oggetto Youtube. * @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-paused");  if (isEnd) $ featuredVideo.removeClass ("is-playing", "is-paused"); 

Fluttuante e attaccare il video

Quello che segue è il codice per far galleggiare e attaccare il nostro lettore video. Vale la pena notare che dovremmo solo spostare il video durante la riproduzione del video. Pertanto, per prima cosa controlliamo l'iframe per vedere se ha il sta giocando classe prima di aggiungere il è appiccicosa classe:

$ window .on ("ridimensiona", function () top = $ featuredMedia.offset (). top; offset = Math.floor (top + ($ featuredMedia.outerHeight () / 2));) .on (" scorri ", function () $ featuredVideo.toggleClass (" is-sticky ", $ window.scrollTop ()> offset && $ featuredVideo.hasClass (" is-playing ")););

Metti alla prova quello che hai fatto e dovresti vedere le cose funzionare!

Demo finale

Conclusione

Sono stati fatti! Questo tutorial mirava a farti iniziare, dandoti le basi su come fluttuare un video in modo simile ai siti web multimediali che potresti aver visto. Abbiamo usato jQuery per rendere il codice più semplice, più breve e più facile da capire per i lettori in generale.

In un progetto reale, tuttavia, sarà probabilmente necessario modificare i dettagli qua e là a seconda della complessità del progetto. Ad esempio, è possibile eseguire la funzione di scorrimento in una funzione di limitazione per ridurre le chiamate di funzione. Potrebbe anche essere necessario regolare la posizione e le dimensioni del video seguendo il layout del sito su un dispositivo mobile, così via e così via.

Tuttavia, controlla la demo, riproduci il video e inizia a scorrere!