26

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.

Stuart
  • 1,168
  • 3
  • 10
  • 17

1 Answers1

45

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • 1
    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? – Stuart Dec 05 '12 at 15:03
  • 4
    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. – Wesley Murch Dec 05 '12 at 15:04
  • 13
    Real question or not, this is the first search result i got, and thank you for answering it anyway. – dev_row May 02 '13 at 03:17
  • 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. – Sherwin Flight Dec 10 '14 at 19:51
  • 5
    "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?" – Nicholas Petersen Jan 12 '15 at 07:23
  • 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](http://jsfiddle.net/rlemon/vhcm3Lke/1/) showing the method I mean. – Praxis Ashelin Feb 05 '15 at 14:25
  • @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? – gwar9 Jun 27 '17 at 21:33
  • @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](https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api). For the accepted answer, the `img` tag would look like this: `` – Stuart Oct 25 '17 at 13:49
  • Excellent. For autoplay you now need to add the whole iframe tag shown here: https://stackoverflow.com/a/53158319/10634638 – estinamir Feb 28 '22 at 17:35