Question

I’ve got an image where when you click it, it gets hidden and the YouTube video gets shown.

I wanted the video to play when you click the image so I have set a parameter on the YT link so it autoplays and this works fine in every browser tested apart from Google Chrome.

Any ideas on why Chrome is autoplaying the video before I’ve even clicked the image?

 <div id="youtube" style="display:none;">
 <iframe width="940" height="520" src="http://www.youtube.com/embed/kr-oMG6EYSs?rel=0&showinfo=0&autoplay=1" wmode="transparent" frameborder="0" allowfullscreen></iframe>
 </div>


 <img src="images/slider_worklife_top.jpg" width="942" height="521" id="imageID" />
 <script type="text/javascript">
 $('#imageID').click(function() {
 $('#youtube').show();
 $('#imageID').hide();
 });
 </script>

Answer 1

Try to wrap your JS code with $(function(){ /* CODE */ }

IF it doesn’t help just try something different and don’t waste your time 🙂 :

<div id="youtube" style="display:none;">
   <iframe width="940" height="520" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe>
 </div>

<img src="images/slider_worklife_top.jpg" width="942" height="521" id="imageID" />
<script type="text/javascript">
$(function(){
  $('#imageID').click(function() {
    $('#youtube').show().find("iframe").attr("src","http://www.youtube.com/embed/kr-oMG6EYSs?rel=0&showinfo=0&autoplay=1");
    $('#imageID').hide();
  });
});
</script>