Il mio sito web viene caricato lentamente a causa di troppi video incorporati

Question

Il mio sito web viene caricato lentamente a causa di troppi video incorporati. Vengo visto dove c'è un'immagine (sopra il punto in cui è incorporato il video) e fai clic su di esso, a quel punto viene caricato il video incorporato. Qualcuno potrebbe darmi un aiuto per capire come farlo? Forse una volta che passi sopra l'immagine, l'youtube si incorpora se caricato? Grazie mille!

Answer 1

Basta usare jQuery per inserire il codice embed dopo l'utente fa clic sull'immagine:

Proprio codice di esempio: HTML

<div id="video" style="background-color:red; width:560px; height:315px;"></div> 

jQuery:

$('#video').on('click', function() { 
    $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none'); 
}); 

Se si desidera che il video per riprodurre automaticamente aggiungere ?autoplay=1 alla fine dell'URL come ho fatto.

Codice senza miniature: http://jsfiddle.net/KFcRJ/

Per estrarre miniatura video:

HTML:

<div id="video" style="background-color:red; width:560px; height:315px;"> 
<a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="youtube"></a></div> 

jQuery:

$('#video').on('click', function() { 
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none'); 
}); 

function getYoutubeID(url) { 
    var id = url.match("[\\?&]v=([^&#]*)"); 
    id = id[1]; 
    return id; 
}; 
$('a.youtube').each(function() { 
    var id = getYoutubeID(this.href); 
    this.id = id; 
    var thumb_url = "http://img.youtube.com/vi/"+id+"/maxresdefault.jpg"; 
    $('<img width="100%" src="'+thumb_url+'" />').appendTo($('#video')); 
}); 

Codice con miniature: http://jsfiddle.net/89uVe/4/