Youtube Overlay Image Div - 下方自动播放

Question

我在这个 homepage 的 YouTube iframe 顶部有一个 div 叠加层。

这个想法是你点击一次，然后视频会自动播放，但我就是不能让它打球。当我将 YouTube 参数设置为“autoplay=1”时，视频在图像下方播放，甚至无需点击它。

这是我在下面使用的代码；

<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; 
this.style.display='none'">

<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" />
</div>

<div id="thevideo" style="display: none;">
<iframe width="1280" height="720"
src="http://www.youtube.com/embed/iy_lolGhjPE?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=light&showinfo=0&origin=http://www.belfastdigitalagency.com"
frameborder="0" allowscriptaccess="always"
allowfullscreen="true"></iframe>
</div>

有什么想法吗？提前非常感谢，即使它只是一个检查看起来很糟糕的东西的指针！

干杯，

菲尔

P.S - 感谢UnLoCo 的传说，它很快就修复了。这是要纠正的最终代码。再次感谢 UnLoCo！

<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');">

<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" />
</div>

<div id="thevideo" style="display: none;">
<iframe id="iframe" width="1280" height="720" src="http://www.youtube.com/embed/iy_lolGhjPE?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=light&showinfo=0&origin=http://www.belfastdigitalagency.com"
frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>

Answer 1

点击后，添加：

document.getElementById('iframe').src = 
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');