it-swarm.com.de

Twitter Bootstrap Modal stoppt das Youtube-Video

Ich bin sehr neu bei Javascript und versuche, Twitter Bootstrap zu verwenden, um eine gut aussehende Website schnell zum Laufen zu bringen. Ich weiß, dass dies etwas mit jquery zu tun hat, aber ich bin nicht sicher, wie ich mein Video anhalten soll, wenn ich die Schließen-Taste oder das Schließen-Symbol drücke. 

Kann jemand erklären, wie ich mein Video zum Stoppen bringen kann, denn selbst wenn ich das Fenster schließe, kann ich es immer noch im Hintergrund hören. 

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
35
catchmikey

Es gibt eine gute Art und Weise, dies zu tun - siehe die Kommentare in der genehmigten Antwort auf diesen Beitrag .

Ich konnte das zwar nicht beim ersten Mal in Betrieb nehmen und befand mich in einem Ansturm, also habe ich einen ziemlich schrecklichen, hackigen Code gemacht, der den Trick macht. 

Dieses Snippet "aktualisiert" die src des eingebetteten iframe, wodurch es erneut geladen wird:

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
32
RobCalvert123

Ich weiß, dass ich mehr als zwei Jahre zu spät komme, aber seitdem haben sich ein paar Dinge geändert. Mit B3 ist dies der neue Weg, um dies aus der Box heraus durchzuführen:

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Viel Spaß mit Bootstrap!

72
gmslzr

Wenn noch jemand das Problem hat, probieren Sie es aus, es hat bei mir funktioniert:

$(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);

        });
    });
});
15
knightkiddo

Hier ist eine einfache Methode, die ich für ein Video in einem modalen Fenster gefunden habe und dann beim Schließen aufhört zu spielen.

Verwenden Sie die HTML-Datei, um den iFrame mit Ihrem Video in den Modal-Body zu laden, wenn der Modal angezeigt wird, und ersetzen Sie den Modal-Body durch nichts, wenn er ausgeblendet ist.

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

Hier ist ein jsfiddle-Beispiel:

http://jsfiddle.net/WrrM3/87/

13

Hier verallgemeinere ich die Antwort von @ guillesalazar.

Dies setzt jeden iFrame innerhalb eines beliebigen Bootstrap-Modals zurück (wenn das Modal geschlossen ist):

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

Fügen Sie dies Ihrem Layout hinzu und Sie sind fertig.

UPDATE: Code geändert für Modale mit mehreren iFrames.

10
thekingoftruth

Sie sollten zuerst iframe src leeren und dann erneut einrichten.

Also meine Arbeitsantwort:

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

Oktober 2014. Für Bootstrap 3.

5
littlealien

Hier ist meine Lösung, es löst die folgenden Probleme mit Bootstrap-Ereignisaufrufen:

  1. Film automatisch abspielen, wenn der Modal angezeigt wird
  2. Stoppen Sie den Film, wenn die Modalität ausgeblendet ist

HTMLcarousel in modal, das erste aktive Element ist das iframe-Video

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript autoplay, wenn modal angezeigt wird, dann die URL zurücksetzen und erneut auf iframe src anwenden

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});
3

Hatte einen Modal mit vielen Videos. Der Code von @guillesalazar wurde aktualisiert, um mehrere Videos im Modal zu schließen.

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });
2
Lee Harris

Dieser macht es perfekt: 

$("#myModal").on("hidden.bs.modal", function(t) {
   var o = $(t.target).find("iframe");
   o.each(function(t, o) {
      $(o).attr("src", $(o).attr("src"))
   });
});

Wenn Sie jedoch möchten, dass es beim Schließen von modal geöffnet/beendet wird, verwenden Sie diesen Code:

Stellen Sie jedoch sicher, dass Sie enablejsapi=1 in Ihrem Quellcode hinzufügen, wie zum Beispiel der folgende: 

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();
2
nikola_wd

Die oben erwähnte Antwort von Guille ist eine Drop-In-Funktion, die mit Bootstrap 3, der neuesten Version von Youtube ab dem 14. August und für mehrere Videos/Modals auf einer Seite funktioniert. 

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
}); 
1
spiral

Ein viel einfacherer Weg als alle diese Antworten ist nur das Ersetzen der gesamten SRC. Dies funktioniert für alle Modals und Sie können die iframe-Klasse nach Bedarf anpassen.

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

1
Jonathan

Meine Lösung dafür, die für Bootstrap 3 und das moderne YouTube-Format embed funktioniert, lautet wie folgt.

Angenommen, Ihr Video ist in einen Standard Bootstrap 3 Modal mit id="#video-modal" eingebettet, erledigt dieses einfache Javascript die Aufgabe.

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

Ich habe Lösungsvorschläge zu diesem Problem gesehen, bei denen YouTube API verwendet wurde. Wenn Ihre Website jedoch keine https-Website ist oder Ihr Video in das von YouTube empfohlene moderne Format eingebettet ist oder wenn Sie die Option no-cookies gesetzt haben, dann Diese Lösungen funktionieren nicht und Sie erhalten den Effekt "TV-Gerät auf einen toten Kanal" anstelle Ihres Videos.

Ich habe das oben auf jedem Browser getestet, den ich in die Finger bekommen konnte, und es funktioniert sehr zuverlässig.

1
Dave Sag

Ich verwendete eine Kombination aus Ruslanas Balčiūnas und Nathan McFarland 's Antworten, um etwas zu programmieren, das für mich gut funktionierte. 

$('#myModal').on('hide',function(){
   $('.modal-body iframe').attr('src','');
});

Im Grunde setzt dies also das src-Attribut der iframe auf nichts, wenn das close-modale Ereignis ausgelöst wird. Kurz und bündig.

1
ckpepper02

7 Jahre später müssen wir das noch lösen.

Wir haben den besten Weg gefunden, das Problem zu beheben. (Inspiriert von RobCalvert12 answer)

  jQuery(".modal-backdrop, .modal.open .close,.modal.open .btn").live("click", function() {  
         // Get iframe opened 
         var iframe_open = jQuery('.modal.open');     
         // Get src from opened iframe 
         var src = iframe_open.attr('src');
         // replace src by src to stop it that's the tips
        iframe_open.attr("src", src);
});
1
Mepps

Meine Lösung für 2 oder mehr Youtube-Videos mit dem HTML-Daten- * -Attribut . Das Video wird automatisch wiedergegeben und beendet , wenn das Modal geöffnet und geschlossen wird.

<button data-url="https://www.youtube.com/embed/C0DPdy98e4c" data-toggle="modal" data-target="#mymodal">Video 1</button>
<button data-url="https://www.youtube.com/embed/ScMzIvxBSi4" data-toggle="modal" data-target="#mymodal">Video 2</button>

<!-- Modal -->
<div id="mymodal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
$('.modal').on('show.bs.modal', function (event) {
  $(this).find('iframe').attr("src", $(event.relatedTarget).data('url') );
});

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find('iframe').attr("src", "");
});

Hier ist eine Codepen-Demo: https://codepen.io/danielblazquez/pen/oOxRJq

0
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});
0

@ guillesalazaars Antwort war nur die erste Hälfte meines Fixes, daher fühlte ich mich gezwungen, meine Situation mitzuteilen, falls es jemandem in der Zukunft hilft. Ich habe auch ein eingebettetes Youtube-Video, aber ich habe mein Video so eingestellt, dass es automatisch abgespielt wird, wenn der Frame mit autoplay=1 geladen wird. Um das Autoplay-Problem beim Laden der Seite zu umgehen, habe ich meine Youtube-URL in einer Variablen gespeichert, die die Iframe-Quelle mithilfe eines Click-Handlers festlegt. Um das Problem zu lösen, habe ich einfach den Attribut-Quelllink entfernt:

Meine URL, um das modale Fenster auszulösen:

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

Meine versteckten modalen Fenster divs:

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

Meine JS:

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});
0
Frankenmint

Für angular oder für dynamisches HTML oder wenn wir mehrere iframes haben, dann verwenden Sie wie folgt

$("#myModal").on('hidden.bs.modal', function (e) {
  $("#myModal iframe").each(function(){
    $(this).attr("src", $(this).attr("src"));
  });
});
0