Multiple YouTube Videos auf Seite in iFrame andere anhalten / stoppen

Problem: Man hat auf einer Seite mehrere YouTube Videos als iFrame eingebunden. Die Videos lassen sich aber parallel starten und dadurch laufen alle Videos gleichzeitig. Dieses Script stoppt alle anderen Videos auf der Seite automatisch, wenn eines der Videos gestartet wird:

Für Suchmaschinen: youtube alle videos stoppen wenn ein video startet, stop all iframes youtube videos when one video starts. Andere Videos anhalten, wenn ein Video läuft. Automatisch alle YouTube Filme anhalten wenn neues Video play gedrückt wird. Immer nur ein Video abspielen in YouTube iFrame auch wenn mehrere Videos auf der gleichen Seite eingebunden wurden.

(function ($) {
   $(function () {

      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      tag.type='text/javascript';
      $('body').append(tag);
   
      $('iframe[src*="youtube"]').each(function(){
         var $me = $(this);
         var src = $me.attr('src');
         if (src.indexOf('enablejsapi=1') == -1) {
            $me.attr({src: src + (src.indexOf('?') == -1 ? '?' : '&') + 'enablejsapi=1'});
         }
      });
   
      window.onYouTubeIframeAPIReady = function () {
   
         var playerCurrentlyPlaying = null;
         var player_cnt = 0;
         
         $('iframe[src*="youtube"]').each(function(){
            
            var $me = $(this);
            var player_id = $me.attr("id");
            
            if (!player_id) {
               player_id = "ytpl-"+(player_cnt++);
               $me.attr({id:player_id});
            }
            
            var player = new YT.Player( player_id, { 
               events: {   
                  'onReady': function () {},
                  'onStateChange': function (event) {
         
                     if (event.data == YT.PlayerState.PLAYING) { 
                        if (playerCurrentlyPlaying && playerCurrentlyPlaying != $me.data().player) {
                           playerCurrentlyPlaying.pauseVideo();
                        }
                        playerCurrentlyPlaying = $me.data().player;
                     }         
                  }
               }   
            });
            
            $me.data({player:player});
         });   
      }
   
   });
})(jQuery);

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.