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

Answer 1

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:

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('