title: Youtube Overlay Image Div - Autoplay Underneath
body: <p>I have a div overlay on top of a YouTube iframe on this <a href="http://www.belfastdigitalagency.com" rel="nofollow noreferrer">homepage</a>.  </p>
  
  <p>The idea is you click once and then the video would automatically play, however I just can't get it to play ball.  When I set YouTube paramater 'autoplay=1' the video plays underneath the image without even clicking it.</p>
  
  <p>Here's the code I'm using below;</p>
  
  <pre><code>&lt;div onclick="thevid=document.getElementById('thevideo');
  thevid.style.display='block'; 
  this.style.display='none'"&gt;
  
  &lt;img style="cursor: pointer;"
  src="http://www.belfastdigitalagency.com/wp-content/themes/responsy-v2.5/random_image1.php"
  alt="belfast digital marketing agency animated video" /&gt;
  &lt;/div&gt;
  
  &lt;div id="thevideo" style="display: none;"&gt;
  &lt;iframe width="1280" height="720"
  src="http://www.youtube.com/embed/iy_lolGhjPE?rel=0&amp;vq=hd720&amp;color=white&amp;autoplay=0&amp;wmode=transparent&amp;theme=light&amp;showinfo=0&amp;origin=http://www.belfastdigitalagency.com"
  frameborder="0" allowscriptaccess="always"
  allowfullscreen="true"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas what's going wrong?  Much appreciated in advance, even if it's just a pointer to check out something that looks bad!</p>
  
  <p>Cheers,</p>
  
  <p>Phil</p>
  
  <p>P.S - thanks to the legend that is <a href="https://stackoverflow.com/users/179545/unloco">UnLoCo</a>, it's fixed in no time. Here's the final code to correct. Thanks again UnLoCo!</p>
  
  <pre><code>&lt;div onclick="thevid=document.getElementById('thevideo');
  thevid.style.display='block'; this.style.display='none'; 
  document.getElementById('iframe').src = 
  document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"&gt;
  
  &lt;img style="cursor: pointer;" src="http://www.belfastdigitalagency.com/wp-content/themes/responsy-v2.5/random_image1.php" alt="belfast digital marketing agency animated video" /&gt;
  &lt;/div&gt;
  
  &lt;div id="thevideo" style="display: none;"&gt;
  &lt;iframe id="iframe" width="1280" height="720" src="http://www.youtube.com/embed/iy_lolGhjPE?rel=0&amp;vq=hd720&amp;color=white&amp;autoplay=0&amp;wmode=transparent&amp;theme=light&amp;showinfo=0&amp;origin=http://www.belfastdigitalagency.com"
  frameborder="0" allowscriptaccess="always" allowfullscreen="true"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>