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

Question

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.

Solution

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.

Comments

[Stuart]

Awesome, thank you very much. That's just what I needed. Couldn't find a clean example like this. Just out of interest, is this question now a -2 because it's an easy question or because I worded it wrongly?

[Wesley Murch]

It's because you didn't show any attempt at solving the problem yourself. Next time, post the code you've tried, even if it doesn't come close to working. Also the phrase "What is the best" tends to be a flag.

[dev_row]

Real question or not, this is the first search result i got, and thank you for answering it anyway.

[Sherwin Flight]

It is also the first result I got as well. Maybe people should not jump so quickly to close questions. Many many MANY times over the years the first result, or the closest to what I want, is a question marked as closed, but with the answer I am looking for. I understand that the OP didn't post any of the things he tried, but the question was still helpful, and gave me the answer I was looking for.

[Nicholas Petersen]

"Maybe people should not jump so quickly to close questions. Many many MANY times over the years the first result, or the closest to what I want, is a question marked as closed" - Right mates, but don't you understand? The Watchmen need something to do. Seriously: how stupid. This was a great question. "What is the best way to load an image as a placeholder/splash screen instead of the video iframe?"

[Praxis Ashelin]

If possible, could you add a second method which simply hides the video at first instead of replace it? That way it can still load in the background. I would add this as a new answer myself but the question is closed, yet this is the first google hit so it would be useful for many people. Here's a JSFiddle showing the method I mean.

[gwar9]

@WesleyMurch is there a way to still display the youtube video if an img is not loaded in the html at all? I'm looking at this solution for a client that will be using a CMS. Ideally they would always use a high res place holder where your solution works wonderfully but in the event no img is included in the markup at all the video doesnt show at all, how that this be fixed?

[Stuart]

@gwar9 You could write a conditional statement which loaded in a placeholder image if the user does not upload one—this way you have an image anyway. You could get the YouTube placeholder image as per this question. For the accepted answer, the img tag would look like this: <img src="https://img.youtube.com/vi/zP_D_YKnwi0/hqdefault.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">

[estinamir]

Excellent. For autoplay you now need to add the whole iframe tag shown here: stackoverflow.com/a/53158319/10634638