¿Mejor rendimiento de carga de página al cargar varios videos de YouTube integrados?

Question

Tengo una página que muestra varios videos (generalmente 10) incrustados. Los videos usan el nuevo código de inserción de IFRAME de youtube y aparentemente para cada IFRAME hay una solicitud por separado al cargar la página. ¿Hay alguna manera de diferir la carga de los videos después de que se cargue el resto de la página, para que no ralenticen tanto la carga de la página?

Answer 1

Bueno, escribí un javascript thingy (llamado "LYTE") que creará un "dummy player" (que parece & se siente como un YouTube insertado) por cada div con una clase específica ("lyte") y id con el ID de YouTube. Solo cuando se hace clic en el reproductor "ficticio", se carga el actual iframe de YouTube y, de hecho, tiene un impacto importante en el rendimiento de las páginas que incorporan videos de YouTube. Puede verlo en acción on my blog.

LYTE actualmente no está realmente disponible de forma independiente, solo como parte de WP-YouTube-Lyte, the WordPress plugin I wrote, pero con cambios mínimos, debe poder extraer todo el código relevante del complemento.

Básicamente tienes que crear algo como esto en tu 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> 

Este bloque se carga Lyte-min.js, que llenará el div con todos los elementos gráficos del jugador ficticio (imagen, botón de reproducción, la barra de control, título) y añadirá un EventListener a la div que activará el reemplazo del div con el jugador real insertado cuando se haga clic.

Puede encontrar el complemento here y mirar el código here (wp-youtube-lyte.php crea el div, lyte/lyte.js es el javascript real ... thingy).

Answer 2

Salida esta solución: Load the YouTube Video Player On-Demand

Básicamente, es como la sustitución de los códigos jugador iframe de vídeo de YouTube con jQuery al hacer clic en algunas miniaturas.

Answer 3

automática, solicitar la reducción, la solución

En WordPress plugin de forma

Aquí es un plugin de WordPress se puede descargar e instalar manualmente a través del plugin de WordPress repositorio. Creé esto hoy solo para manejar esta situación. No se necesitan cambios en el contenido, esto funciona automáticamente una vez activado en cualquiera y todos los iframes.

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

Answer 4

Esta es una 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>