Youtube覆盖图像Div - 在底下自动播放 [英] Youtube Overlay Image Div - Autoplay Underneath

问题描述

在此首页上的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 =贝尔法斯特数字营销机构动画视频/> 
< / div> 
 
< div id =thevideostyle =display：none;> 
< iframe width =1280height =720
 src =http://www.youtube.com/embed/iy_lolGhjPE?rel=0&vq=hd720&color=white& autoblay = 0& wmode = transparent& theme = light& showinfo = 0& origin = http：//www.belfastdigitalagency.com
 frameborder =0allowcriptaccess =always
 allowfullscreen =true >< / iframe中> 
< / div> 
  

任何想法出了什么问题？很高兴提前，即使它只是一个指针，检查出看起来不好的东西！

干杯，

Phil

PS - 感谢 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 （ '自动播放= 0'， '自动播放= 1'）;> 
 
< img style =cursor：pointer; src =http://www.belfastdigitalagency.com/wp-content/themes/responsy-v2.5/random_image1.phpalt =贝尔法斯特数字营销机构动画视频/> 
< / div> 
 
< div id =thevideostyle =display：none;> 
< iframe id =iframewidth =1280height =720src =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 =0allowcriptaccess =alwaysallowfullscreen =true> < / iframe中> 
< / div> 
  

解决方案

点击后，添加：

  document.getElementById（'iframe'）。src = 
 document.getElementById（'iframe'）。src.replace（'autoplay = 0 ， '自动播放= 1'）; 
  

I have a div overlay on top of a YouTube iframe on this homepage.

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.

Here's the code I'm using below;

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

Any ideas what's going wrong? Much appreciated in advance, even if it's just a pointer to check out something that looks bad!

Cheers,

Phil

P.S - thanks to the legend that is UnLoCo, it's fixed in no time. Here's the final code to correct. Thanks again 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>

解决方案

on click, add:

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

这篇关于Youtube覆盖图像Div - 在底下自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！