My website loads slow because of too many embedded videos

Question

My website loads slow because of too many embedded videos. I'm seen where there is an image (overtop of where the video is embedded) and you click it, at which point, the embedded video is loaded. Could anyone give me some help figuring out how to do this? Maybe once you hover over the image the youtube embed if loaded? Thanks so much!

Try not embedding so many videos? Max per page should generally be one! — Niet the Dark Absol, Oct 27 '13 at 18:45
what research efforts have you done? There is lots of information available , question is far too broad — charlietfl, Oct 27 '13 at 18:45
How are you embedding them? Usually it will only start loading when pressing play.. so maybe it is something else that is causing the slow loading? — putvande, Oct 27 '13 at 18:48
well you should show extracted thumbnails from videos and load each video on demand — Ashkan Mobayen Khiabani, Oct 27 '13 at 19:06

AbdelElrafa · Accepted Answer · 2013-10-30T21:29:15.733

Just use jQuery to insert the embed code after the user clicks on the image:

Just sample code: 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');
});

If you want the video to autoplay add ?autoplay=1 to the end of the url as I did.

Code without thumbnail: http://jsfiddle.net/KFcRJ/

To extract video thumbnail:

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'));
});

Code with thumbnail: http://jsfiddle.net/89uVe/4/

@Ashkan Mobayen Khiabani Edited my answer to extract thumbnail. — AbdelElrafa, Oct 27 '13 at 19:29

My website loads slow because of too many embedded videos

1 Answers1

Linked