Youtube-Video wird immer noch abgespielt, wenn Bootstrap Modal geschlossen wird

Lesezeit: 7 Minuten

Ich erstelle eine Website mit Bootstrap, die hier zu finden ist – http://www.branchingouteurope.com/digital-spark-testing/

Wenn Sie das Videobild auswählen, sehen Sie ein modales Fenster, in dem ein YouTube-Video geöffnet wird. Das Problem, das ich habe, ist, dass das Video weiter abgespielt wird, wenn das modale Fenster geschlossen wird. Ich möchte, dass dieses Video stoppt, wenn das modale Fenster geschlossen wird.

Ich habe online gesucht und viele Lösungen gelesen, aber keine scheint zu funktionieren. Hier ist die Markierung …

<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="https://stackoverflow.com/questions/22613303/img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/>
</div>
</span>

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

`

  • Falls noch jemand nach der Antwort sucht: stackoverflow.com/a/36313110/6135496

    – Jax297

    30. März 2016 um 15:25 Uhr

Hier ist eine etwas leichtere Antwort, die auf der Version von Dizarter und einer der Lösungen basiert, auf die er verweist.

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

  • Ich benutze dies, aber es funktioniert nur, wenn das Video nicht auf Autoplay eingestellt ist.

    – Perri

    24. Juli 2015 um 14:39 Uhr

  • Als Ergänzung zur Antwort von CloudKiller habe ich eine Lösung hinzugefügt, die mit Autoplay @Perry funktioniert

    – Danny Mahoney

    12. Februar 2019 um 10:15 Uhr

Benutzer-Avatar
dizarter

Das Testen hier in FireFox 26.0 funktioniert wie erwartet. Wenn ich entweder das Modal schließe oder außerhalb davon klicke und es dann erneut öffne, wird das Video wieder gestartet und gestoppt.

BEARBEITEN 1

Das in Chrome wiedergegebene Video wird tatsächlich weiter abgespielt, nachdem das Modal geschlossen wurde.

Probieren Sie diese bereits beantworteten Fragen aus

Stoppen Sie ein YouTube-Video mit jquery?

Twitter Bootstrap Modal stoppt Youtube-Video

Der beste Weg scheint zu sein, die YouTube-API zu verwenden, um das Video zu stoppen. Antworten, die diese Methode verwenden, sind in den obigen Fragen verfügbar.

BEARBEITEN 2

Diese Lösung scheint zu funktionieren.

Holen Sie sich zuerst das JS aus diesem Beitrag: YouTube iframe API: Wie steuere ich einen iframe-Player, der sich bereits im HTML befindet? und auf der Seite einfügen.

Fügen Sie dieses JS hinzu, nachdem Sie das obige Skript geladen haben (kurz vor dem schließenden Body-Tag).

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>

Sie müssen dem div, das den Iframe enthält, auch eine ID hinzufügen, wie unten beschrieben

<div class="modal-body" id="yt-player">
    <iframe src="https://www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe>
</div>

  • Danke für deinen Input dizarter. Ich habe mir die Threads angesehen, die Sie gerade gepostet haben, und keine der Lösungen schien zu funktionieren, was bedeutet, dass mir wahrscheinlich etwas fehlt

    – Stefan Tamlin

    24. März 2014 um 15:42 Uhr


  • Habe es versucht … wieder kein Glück. Hier ist die Live-Seite, falls ich etwas falsch verstanden habe yourdigitalspark.com/index-test-1.html

    – Stefan Tamlin

    24. März 2014 um 16:10 Uhr

  • Hallo Stephen, bitte überprüfen Sie die aktualisierte Antwort oben und lassen Sie mich wissen, ob sie funktioniert.

    – Dizarter

    25. März 2014 um 11:32 Uhr

  • Das hat funktioniert. Du bist eindeutig erstaunlich! Vielen Dank dafür. Wünschte, ich wäre so schlau wie du Dizarter.

    – Stefan Tamlin

    4. April 2014 um 15:45 Uhr

  • Stephen, du könntest die Antwort auch positiv bewerten, das würde viel bedeuten. 🙂 Vielen Dank.

    – Dizarter

    3. Mai 2014 um 3:48 Uhr


Diese Lösung funktioniert gut für Boostrap 4. Sie unterstützt viele verschiedene Modale auf derselben Seite, ohne die Modal-ID anzugeben. Hier ist die Demo http://jsfiddle.net/hxtpoe/6k09f4x2/

$('.modal').on('hide.bs.modal', function() {
     var memory = $(this).html();
     $(this).html(memory);
});

  • Das ist brilliant! Die anderen Antworten, die das Zurücksetzen des iframe src erfordern, funktionieren nicht richtig, wenn das Modal mehr als ein Video enthält. (Nach dem Schließen des Modals und erneutem Öffnen lädt der Iframe möglicherweise einen falschen Link.) Dies ist eine viel brillantere Methode, um zu verhindern, dass die Quelle des Iframes falsch geladen wird, wenn das Modal mehr als ein Video enthält!

    – ansicht1

    22. Juli 2020 um 0:11 Uhr


  • Super @Łukasz! Ich habe dieses @ forwardemail.net aber optimiert, so dass Modale nicht geändert werden, es sei denn, es gibt eine <iframe> darin (z. B. YouTube). Ich habe es auch so gemacht, dass es auch für Modals funktioniert, die neu zum DOM hinzugefügt wurden. Ihr aktueller Code funktioniert ohne die von mir vorgenommenen Änderungen nicht für neue Modale. Siehe meinen Kommentar unten für die neu aktualisierte Lösung @ stackoverflow.com/a/66014515/3586413.

    Benutzer3586413

    2. Februar 2021 um 17:16 Uhr


Benutzer-Avatar
Bruno Ribeiro

Schauen Sie sich meinen Code an. Ich musste keine API verwenden

// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) {
  var idVideo = $(e.relatedTarget).data('id');
  $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/'%20+%20idVideo%20+%20'?autoplay=true" frameborder="0" allowfullscreen></iframe>');
});
//on close remove
$('#myModalPrev').on('hidden.bs.modal', function () {
   $('#myModalPrev .modal-body').empty();
});

HTML

<a href="#" data-id="5Kp_1Vq6pRg" data-target="#myModalPrev" data-toggle="modal">Abrir Modal</a>
    <div class="modal fade" id="myModalPrev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 id="myModalLabel" class="semi-bold">Visualizar <strong>Marca</strong>.</h4>
                    </div>
                    <hr>
                    <div class="modal-body">
                        Modal Content
                    </div>
                    <hr>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary"><i class="fa fa-times"></i> Fechar</button>               
                    </div>
                </div>
            </div>
        </div>

Demo: https://jsfiddle.net/o0ftdvs1/

Viel einfacher einfacher inspiriert von @Łukasz per https://stackoverflow.com/a/52315492/3586413 mit Live-Demo @ https://forwardemail.net.

//
// any modals with embedded <iframe> we can assume need reset
// <https://stackoverflow.com/a/52315492>
//
$('body').on('hide.bs.modal', '.modal', function() {
  const $modal = $(this);
  // return early if there were no embedded YouTube videos
  if ($modal.find('iframe').length === 0) return;
  const html = $modal.html();
  $modal.html(html);
});

  • Beste Antwort meiner Meinung nach. Funktioniert mit “unendlicher” Menge an Modals / Iframe-Elementen, ohne dass sie explizit per ID angegeben werden müssen.

    – Georg Adamon

    22. Mai 2021 um 17:24 Uhr

  • Das ist auch in Ordnung. Vielen Dank für die Verbesserung von stackoverflow.com/a/52315492/2594499

    – Lukasz

    27. Mai 2021 um 15:45 Uhr

  • Rette mein Leben. Danke!

    – Riad Khalifeh

    22. September 2021 um 13:30 Uhr

  • Beste Antwort meiner Meinung nach. Dadurch konnte ich mehrere YouTube-Modals auf einer Seite haben und beim Schließen stoppen.

    – Chad Warren

    24. Mai um 19:44 Uhr

Benutzer-Avatar
Danny Mahoney

Hier ist eine Alternative zu CloudKillers Antwort, die tatsächlich mit Autoplay funktioniert, ändern Sie einfach .attr zu .removeAttr so:

jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src"));

Aber eine noch mehr verkleinerte/vereinfachte Version davon besteht darin, einfach die zu ersetzen src mit leerem Wert:

$('#myModal iframe').attr('src', '');

Der einzige Code, den Sie hinzufügen müssen, damit dies funktioniert, ist:

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

  • Beste Antwort meiner Meinung nach. Funktioniert mit “unendlicher” Menge an Modals / Iframe-Elementen, ohne dass sie explizit per ID angegeben werden müssen.

    – Georg Adamon

    22. Mai 2021 um 17:24 Uhr

  • Das ist auch in Ordnung. Vielen Dank für die Verbesserung von stackoverflow.com/a/52315492/2594499

    – Lukasz

    27. Mai 2021 um 15:45 Uhr

  • Rette mein Leben. Danke!

    – Riad Khalifeh

    22. September 2021 um 13:30 Uhr

  • Beste Antwort meiner Meinung nach. Dadurch konnte ich mehrere YouTube-Modals auf einer Seite haben und beim Schließen stoppen.

    – Chad Warren

    24. Mai um 19:44 Uhr

Benutzer-Avatar
Perri

Und wenn Sie wie ich möchten, dass die Videos automatisch abgespielt werden, und sie stoppen, wenn Sie auf das Bootstrap-Modal klicken, müssen Sie so etwas tun:

$('.modal-iframe-youtube').click(function (e) {
        e.preventDefault();
        var sitetypeHref = $(this).attr('href');
        var sitetypeHrefAuto = sitetypeHref + "?autoplay=1"
        //sitetypeHref = sitetypeHref.replace('watch?v=', 'v/');
        $('#modal-window-iframe-youtube').on('shown.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHrefAuto);
        });
        $("#modal-window-iframe-youtube").on('hidden.bs.modal', function () {
            var iFrame = $(this).find("iframe");
            iFrame.attr("src", sitetypeHref);
        });
        $('#modal-window-iframe-youtube').modal({ show: true });
    });

Beachten Sie, dass ich das Argument „?autoplay=1“ dynamisch hinzufüge. Hoffe das hilft jemandem.

1017840cookie-checkYoutube-Video wird immer noch abgespielt, wenn Bootstrap Modal geschlossen wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy