Bootstrap modal с видео youtube не приостанавливается при закрытии

Question

У меня есть несколько модальных загрузочных модалов с видео с YouTube, и я хочу приостановить, не останавливаясь, когда модальный его закрыт. Я искал, но не смог найти подходящее решение. Как только я закрываю модальный и снова открываю, видео начинается с самого начала. Мой код

$(document).ready(function() { 
 
    $('.modal').each(function() { 
 
    var src = $(this).find('iframe').attr('src'); 
 

 
    $(this).on('click', function() { 
 

 
     $(this).find('iframe').attr('src', ''); 
 
     $(this).find('iframe').attr('src', src); 
 

 
    }); 
 
    }); 
 
}); 
 

 

 
function checkForYoutubeVideos(){ 
 
      if (jQuery('.youtubeplayer').length){ 
 
       players = {}; 
 
       var tag = document.createElement('script'); 
 
       tag.src = "https://www.youtube.com/iframe_api"; 
 
       var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
      } 
 
     } 
 
     function onYouTubeIframeAPIReady(e){ 
 
      jQuery('iframe.youtubeplayer').each(function(i){ 
 
       var youtubeiframeClass = jQuery(this).attr('id'); 
 
       players[youtubeiframeClass] = new YT.Player(youtubeiframeClass, { 
 
        events: { 
 
         onReady: onPlayerReady, 
 
         onStateChange: onPlayerStateChange, 
 
         onError: onPlayerError 
 
        } 
 
       }); 
 
      }); 
 
      pauseFlag = false; 
 
     } 
 
     function onPlayerError(e){ 
 
      var videoTitle = e['target']['B']['videoData']['title']; 
 
      ga('send', 'event', 'Error', 'Youtube API', videoTitle + ' (Code: ' + e.data + ')', {'nonInteraction': 1}); //Log the API error 
 
     } 
 
     function onPlayerReady(e){ 
 
      //Do something when player is ready. 
 
     } 
 
     function onPlayerStateChange(e){ 
 
      var videoTitle = e['target']['B']['videoData']['title']; 
 
      if (e.data == YT.PlayerState.PLAYING){ 
 
       ga('send', 'event', 'Youtube', 'Play', videoTitle); 
 
       pauseFlag = true; 
 
      } 
 
      if (e.data == YT.PlayerState.ENDED){ 
 
       ga('send', 'event', 'Youtube', 'Finished', videoTitle, {'nonInteraction': 1}); 
 
      } else if (e.data == YT.PlayerState.PAUSED && pauseFlag){ 
 
       ga('send', 'event', 'Youtube', 'Pause', videoTitle); 
 
       pauseFlag = false; 
 
      } 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="bs-example"> 
 
    <a href="#videoModal2" target="_blank" class="ga_track wp-read" data-toggle="modal">WATCH VIDEO &nbsp; <span class="next-arrow"></span> <span class="next-arrow"></span></a> 
 

 
    <!-- Modal HTML --> 
 
    <div id="videoModal2" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <iframe class="youtubeplayer" width="100%" height="315" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

на основе this answer. Вы должны использовать ifTube iframe api. Чтобы использовать его сначала, вы должны включить его, добавив & enablejsapi = 1 в конец строки запроса iframe в ссылке. Пример:

<iframe width="560" height="315" class="youtubeplayer" id="youtubeplayer" src="https://www.youtube.com/embed/34Na4j8AVgA?list=PLDcnymzs18LWrKzHmzrGH1JzLBqrHi3xQ&enablejsapi=1" frameborder="0" allowfullscreen></iframe> 

Далее вам нужно использовать самозагрузки модальный событие «shown.bs.modal» & «hidden.bs.modal», чтобы проверить, когда модальный открыт и когда близко.

Затем я создал функцию «toggleVideo», которая отправляет сообщение в iframe, так вы общаетесь с API YouTube при встраивании iframe вручную. «PostMessage» - это функция HTML5. Большинство современных браузеров поддерживают postMessage, хотя Internet Explorer 7 ее не поддерживает.

$(document).ready(function() { 
    $('.modal').each(function() { 
     $this = $(this); 
     $this.on('shown.bs.modal', function() { 
      toggleVideo('playVideo', $(this)); 
     }); 

     $this.on('hidden.bs.modal', function(){ 
      toggleVideo('pauseVideo', $(this)); 
     }) 
    }); 

    function toggleVideo(state, div) { 
     var iframe = div.find("iframe")[0].contentWindow; 
     iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*'); 
    } 
});