Question

Help! Could someone please tell me what I’m doing wrong? I’m trying to produce a clickable image link so that when clicked it will start my youtube video. Here’s what I have…

<iframe class="youtube" width="400" height="257" src="http://www.youtube.com/embed/I-TiwjSELQE?autoplay=1" frameborder="0" allowfullscreen imgsrc="images/ciafree-yt" width="413" height="242"></iframe>

Thank you : )

Answer 1

You could use jQuery and simply add id="yt-video" to your embed code.

Make sure you reference jQuery (https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js) in your HTML as well.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>

Then add this simple jQuery:

<script>
$(document).ready(function() {
    $('#yt-video').hide(); // hides the video initially
    $('#id_of_image_div_clicked').click(function(){
       $('#id_of_image_div_clicked').hide(); // hides the clicked image
       $('#yt-video').show(); // shows the video
    }
});
</script>