Question

53

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

rated 0 times [ 55] [ 2] / answers: 1 / hits: 30438 / 12 Years ago, wed, december 5, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gregoriocoya

Add To Favorites

Follow

Total Points: 549

Total Questions: 111

Total Answers: 104

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 12 Years ago raymondd · Accepted Answer

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.