我有一个包含视频的div. div的背景具有一个假的“播放”按钮,我已将其设计为用作播放按钮,而不是Youtube的标准视频“播放”按钮.该视频最初设置为“ display：none”.

我已经在下面部署了代码,以便当您单击div时,该div消失,视频现在开始显示并开始播放.

如何编辑代码,以便在视频播放完毕后,视频消失并重新显示div？

<div  class="videodiv" this.style.cursor='pointer'; 
onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; 
this.style.display='none'; "></div>
<div  class="youtubevid" id="thevideo" style="display: none;"><object width="420" 
height="160"><param name="movie" value="//www.youtube.com/v/vIdeoUrl?
 hl=en_US&amp;version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1">
</param><param name="allowFullScreen" value="true"></param><param 
name="allowscriptaccess" value="always">
</param><embed src="//www.youtube.com/v/vIdeoUrl?
hl=en_US&amp;version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
type="application/x-shockwave-flash" width="420" height="160" 
allowscriptaccess="always" allowfullscreen="true"></embed></object></div>

解决方法:

这是您要找的东西：

http://jsfiddle.net/7Gznb/

// when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            alert('done');
          //do something here

        }

顺便说一下,这就是Youtube API