Prestazioni di caricamento della pagina migliori durante il caricamento di più video incorporati di YouTube?

Question

Ho una pagina che mostra più video (di solito 10) incorporati. I video utilizzano il nuovo codice di incorporamento IFRAME di YouTube e apparentemente per ogni IFRAME c'è una richiesta separata durante il caricamento della pagina. C'è un modo per posticipare il caricamento dei video dopo che il resto della pagina è stato caricato, quindi non rallentano il caricamento della pagina tanto?

Answer 1

Beh, ho scritto un javascript thingy (chiamato "LYTE") che creerà un "giocatore fittizio" (che sembra & si sente come un normale embed di YouTube) per ogni div con una classe specifica ("lyte") e id con l'id di YouTube. Solo quando si fa clic sul player "fittizio", viene caricata l'iframe effettiva di YouTube e in effetti ha un impatto importante sul rendimento delle pagine che incorporano i video di YouTube. Puoi vederlo in azione on my blog.

LYTE al momento non è realmente disponibile standalone, solo come parte di WP-YouTube-Lyte, the WordPress plugin I wrote, ma con modifiche minime dovresti essere in grado di estrarre tutto il codice pertinente dal plugin.

Fondamentalmente è necessario creare qualcosa di simile nel codice HTML;

<div class="lyte" id="7nuiOe8M6bw" style="width:640px;height:385px;"> 
<script type="text/javascript"><!-- 
var nT='newtube-';var bU='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/'; 
var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert} 
function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}}; 
--></script></div> 

Questo blocco caricherà Lyte-min.js, che riempirà il div con tutti gli elementi grafici del giocatore fittizio (immagine, pulsante di riproduzione, barra di controllo, il titolo) e aggiungerà un EventListener al div che innescherà la sostituzione del div con il player incorporato reale quando si fa clic.

È possibile trovare il plug-in here e guardare il codice here (wp-youtube-lyte.php crea il div, lyte/lyte.js è il javascript effettivo ... thingy).

Answer 2

di verificare questa soluzione: Load the YouTube Video Player On-Demand

In sostanza, è come sostituire i video di YouTube iframe codici giocatore con jQuery quando si fa clic alcune miniature.

Answer 3

automatico, riducendo richiesta, soluzione

In WordPress modulo plug

Ecco un plugin per WordPress è possibile scaricare e installare manualmente tramite il plugin per WordPress repository. L'ho creato oggi solo per gestire questa situazione. Non sono necessarie modifiche al contenuto, questo funziona automaticamente una volta attivato su qualsiasi iframe.

https://wordpress.org/plugins/lowermedia-iframes-on-demand/

Answer 4

Questo è un jsfiddle demo.

HTML

<div class="youtube-container"> 
    <div class="youtube-player" data-id="1y6smkh6c-0"></div> 
</div> 

Javascript

(function() { 
    var v = document.getElementsByClassName("youtube-player"); 
    for (var n = 0; n < v.length; n++) { 
     var p = document.createElement("div"); 
     p.innerHTML = labnolThumb(v[n].dataset.id); 
     p.onclick = labnolIframe; 
     v[n].appendChild(p); 
    } 
})(); 

function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 

function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); 
    iframe.setAttribute("frameborder", "0"); 
    iframe.setAttribute("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 

CSS

<style> 
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; } 
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; } 
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto } 
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; } 
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 
</style>