Click on image (splashscreen) to play embedded Youtube Movie

Question

I Was wondering how to make something as followed:

I want to have an image that displays a splash image, clicking on that image it will play a youtube Movie in the same placeholder. ( to be clear I don't want to show the embedded player directly but first a clickable image)

Answer 1

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 here: http://jsfiddle.net/2fAxv/1/

Answer 2

Here's how to do it using jQuery. The previous examples given, still played the video even when the container was hidden.

Create a container to hold your thumbnail:

<div id="video"></div>

Then you can style your thumbnail in CSS with something like this:

#video {
    display: block;
    width: 320px;
    height: 240px;
    background: url(images/my_video_thumb.jpg) no-repeat top left;
}

...and then you want to remove the background and create your iframe on the fly using jQuery with something like this:

$('#video').on('click', function() {
    $(this).html('<iframe src="http://www.youtube.com/embed/abcdef12345?rel=0&autoplay=1" width="320" height="240" frameborder="0" allowfullscreen="true">').css('background', 'none');
});

Demo: codepen (includes VanillaJS and jQuery example)