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>

`

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"));
});

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>

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);
});

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);
});

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', '');
});

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.