<iframe> bir gizli bir div YouTube video içeren var. Kullanıcı bir linke tıkladığında, bu div görünür hale gelir, kullanıcı videoyu oynatmak gerekir.

Kullanıcı panelini kapatır, video oynatma durması gerekir. Bunu nasıl başarabilir?

Kod:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Bu davranışı uygulamak için en kolay yolu pauseVideo playVideo yöntemleri, gerektiğinde çağırarak. ** 9, ben sonucu esinlenerek pluginless bir işlevi istenen davranışı elde etmek için yazdım.

Sadece ayarları:

• Fonksiyon toggleVideo ekledik
• Özelliğini etkinleştirmek için YouTube URL, ?enablejsapi=1 ekledik

Demo: http://jsfiddle.net/ZcMkt/< / ^ br . Kod:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"'   func   '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>