Nasıl iframe gizleme YouTube bir oyuncu Duraklat?

SORU

29 Aralık 2011, PERŞEMBE

Nasıl iframe gizleme YouTube bir oyuncu Duraklat?

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

CEVAP

29 Aralık 2011, PERŞEMBE

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>

Bunu Paylaş: