Incorporamenti di YouTube Lite: un metodo migliore per incorporare i video di YouTube sul tuo sito web

È facile incorporare un video di YouTube, ma sarai sorpreso di sapere quanto peso extra può aggiungere un singolo video di YouTube alle tue pagine web. Il browser deve scaricare ~800 kB di dati (vedi screenshot) per eseguire il rendering del solo video player di YouTube. E questi file vengono scaricati anche prima che il visitatore abbia fatto clic sul pulsante di riproduzione.

Il video di YouTube incorporato non solo aumenta la dimensione in byte delle tue pagine web, ma il browser deve effettuare più richieste HTTP per eseguire il rendering del video player. Ciò aumenta il tempo di caricamento complessivo della tua pagina, influenzando così la velocità della pagina e il punteggio di base del tuo sito web.

L'altro inconveniente con il codice di incorporamento di YouTube predefinito è che esegue il rendering di un video player di dimensioni fisse e non è reattivo. Se le persone visualizzano il tuo sito Web su un telefono cellulare, il video player potrebbe non ridimensionarsi correttamente per lo schermo piccolo.

Incorpora i video di YouTube senza aumentare le dimensioni della pagina

L'ormai defunto Google+ ha utilizzato una tecnica molto intelligente per incorporare i video di YouTube. Quando la pagina è stata inizialmente caricata, Google+ incorporava solo l'immagine in miniatura del video di YouTube e il video player effettivo veniva caricato solo quando l'utente faceva clic all'interno della miniatura.

L'immagine in miniatura del frame dei video di YouTube ha una dimensione di circa 15 kB, quindi siamo in grado di ridurre le dimensioni delle pagine Web di quasi un MB.

Demo di incorporamento di YouTube Lite

Apri questa pagina demo per vedere la tecnica di Google+ in azione. Il primo video viene incorporata nella pagina utilizzando il codice IFRAME predefinito mentre il secondo video utilizza la modalità lite che carica il video di YouTube solo su richiesta.

Quando un utente fa clic sul pulsante di riproduzione, l'immagine in miniatura viene sostituita con il riproduttore video di YouTube standard con riproduzione automatica impostata su 1 in modo che il video venga riprodotto quasi istantaneamente. Il grande vantaggio è che il JavaScript extra di YouTube viene caricato solo quando qualcuno decide di guardare il video incorporato e non altrimenti.

Incorporamenti YouTube leggeri e reattivi

Il codice di incorporamento standard per YouTube utilizza il tag IFRAME in cui la larghezza e l'altezza del video player sono fissate, rendendo così il player non reattivo.

Il nuovo codice di incorporamento on-demand per YouTube è responsivo che regola automaticamente le dimensioni del player in base alle dimensioni dello schermo del visitatore.

Incorpora i video di YouTube in modo reattivo - Tutorial

Passaggio 1: copia e incolla il seguente snippet HTML in qualsiasi punto della pagina Web in cui desideri che venga visualizzato il video di YouTube. Ricorda di sostituire VIDEO_ID con l'ID effettivo del tuo video di YouTube.

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

Non assegneremo altezza e larghezza poiché il video player occuperà automaticamente la larghezza del genitore mentre l'altezza viene calcolata automaticamente. Puoi anche incollare più blocchi DIV con ID video diversi se devi incorporare più video di YouTube sulla stessa pagina.

Passaggio 2: copia e incolla il JavaScript in un punto qualsiasi del tuo modello web. Lo script trova tutti i video incorporati in una pagina Web e quindi sostituisce gli elementi DIV con le miniature dei video e un pulsante di riproduzione (vedi demo).

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

Passaggio 3: copia e incolla il CSS prima del tag head di chiusura del tuo modello web.

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

Puoi vedere la leggera tecnica di incorporamento di YouTube in azione su questa pagina di Codepen.

Tieni presente che i browser Chrome e Safari su iPhone e Android consentono la riproduzione di video HTML5 solo se avviati da un'interazione dell'utente. Bloccano la riproduzione automatica dei contenuti multimediali incorporati per impedire download non richiesti su reti cellulari.

Esercitazioni di incorporamento di YouTube

1. Incorpora un video di YouTube con audio disattivato
2. Inserisci il video di YouTube come sfondo della tua pagina web
3. Incorpora solo una parte di un video di YouTube