Stop YouTube-Video auf Modal schließen - nach AJAX laden

Question

Ich habe ein kleines Skript, das YouTube-Videos zu stoppen verhindert, nachdem ihre Modale geschlossen sind. Das Problem ist, dass es nicht funktioniert, wenn der HTML-Code über AJAX geladen wurde.

Script:

$('#panelModal-1').on('hidden.bs.modal', function() { 
    callPlayer('yt-player-1', 'stopVideo'); 
}); 
$('#panelModal-2').on('hidden.bs.modal', function() { 
    callPlayer('yt-player-2', 'stopVideo'); 
}); 

HTML (geschweifte Klammern bezeichnen Daten von CMS gezogen):

<li> 
    <a href="#" title="Watch Video" data-toggle="modal" data-target="#panelModal-{count}"> 
    <div class="video-background" style="background-image:url(http://img.youtube.com/vi/{video_youtube_id}/hqdefault.jpg)"></div> 
    <div class="video-details"> 
     <h4>{title}</h4> 
     <p>{video_subtitle}</p> 
    </div> 
    </a> 
    <!-- Modal --> 
    <div class="modal fade" id="panelModal-{count}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-{count}"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel-{count}">{title}</h4> 
     </div> 
     <div class="modal-body"> 
      <div id="yt-player-{count}" class="embed-responsive embed-responsive-16by9"> 
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{video_youtube_id}?enablejsapi=1"></iframe> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</li> 

Der AJAX Teil ist dies:

$(document).ready(function() 
    { 
    $('.sub-nav').delegate('.load-case-studies', 'click', function(e) 
    { 
     // Don't follow the link 
     e.preventDefault(); 

     $('.sub-nav a').removeClass('active'); 
     $(this).addClass('active'); 

     // Fetch the next page 
     $.get($(this).attr('href'), function(data) 
     {           
      // Only grab the part of the page we want 
      content = $(data).find('.ajax-wrapper').hide(); 

      // Add it to the DOM 
      $(content).replaceAll('#entry-container'); 

      // Fade-in our new content 
      $(content).fadeIn('fast'); 
     }); 
    }); 
}); 

Wie kann ich die Videos erhalten nach Beenden des Modales zu spielen, wenn die Daten über AJAX geladen wurden?

Answer 1

können Sie folgenden jQuery-Befehl verwenden.

$('#playerID').get(0).stopVideo(); 

Wenn Ihr mit Player-API:

var player = new YT.Player('player');  
player.stopVideo();