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:

<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)

Answer 2

you can make a div with both video and image, hide the video (display:none), when the image is clicked , hide it and show the video.

Answer 3

I found this through Google and needed to do this not with an embed, but with the new (relatively) iframe style that YouTube has for HTML5. I found the solution to be lacking in that it did not differentiate text nodes from elements (firefox's nextSibling and IE's nextSibling). Also, when the video is clicked, the user needed to click twice, once on the image, then once on the YouTube player. This is fixed with the autoplay flag in the YouTube URL. The final behavior is correct in Chrome, Firefox, IE 7+, etc.

Here is my final solution:

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

Answer 4

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/