问题
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>
回答1:
on click, add:
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
来源：https://stackoverflow.com/questions/11995529/youtube-overlay-image-div-autoplay-underneath