How to add a splash screen/placeholder image for a YouTube video [closed]

26
votes

I have a website that includes a lot of embedded YouTube videos; currently these are loaded simultaneously which, of course, causes the site to run extremely slowly when initially loaded.

What is the best way to load an image as a placeholder/splash screen instead of the video iframe?

The image will need to be replaced by the YouTube iframe only when clicked (this should only be loaded when requested), thus reducing the file size of the website dramatically. I have found some similar questions before but they seem to recommend using CSS and jQuery to alter the visibility of the video. This doesn't work in this instance because the video player will still load in the background.

I appreciate any help/suggestions.

1
javascriptjqueryhtmlcssyoutube

1 Answers

43
votes

It should be pretty straight forward, try something like this:

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">

$('img').click(function(){
    var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});

Demo: http://jsfiddle.net/2fAxv/1/

For youtube videos, add &autoplay=1 to the URL if you want them to play when the image is clicked.