Youtube Video läuft weiter, wenn Bootstrap Modal geschlossen wird

Hier ist eine Antwort auf die Dizarter-Version und eine der Lösungen, auf die er verweist, etwas leichter.

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

schauen Sie sich meinen Code an. Ich brauchte keine API

// 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/' + idVideo + '?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/

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

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

Eine noch weiter reduzierte/vereinfachte Version davon ist, die src einfach durch einen leeren Wert zu ersetzen:

$('#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 möchten, dass die Videos wie ich automatisch abgespielt werden, und wenn Sie aufhören, wenn Sie auf Bootstrap-Modal klicken, müssen Sie Folgendes 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.

Dies ist eine Lösung, die für mich funktioniert hat (allerdings etwas hackig):

Zuerst habe ich meine verpackt iframe mit einer div genannt "VideoId" so was:

<div id="VideoId" style="position: relative; padding: 25px; height: 0;">
    <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
    src="//www.youtube.com/etc..."
    frameborder="0" 
    allowfullscreen>
    </iframe>
</div>

Dann habe ich diese Funktion gemacht:

function CloseVideo(){
    document.getElementById("VideoId").innerHTML=" ";
};

Und zum Schluss habe ich beim Schließen meines Panel-Buttons (es war in meinem Fall ein Modal) ein Oncklick-Event hinzugefügt, das meine Funktion aufruft:

<button type="button" class="btn pull-right" onclick="CloseVideo();" data-dismiss="modal">Back</button>

Wenn Sie es erneut aufrufen möchten, müssen Sie natürlich den Inhalt von neu auffüllen VideoId mit Javascript wie folgt:

document.getElementById("VideoId").innertHTML=
 '<iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"+
    'src="//www.youtube.com/etc..."'+
    'frameborder="0"'+ 
    'allowfullscreen>'+
    '</iframe>';

Es funktioniert perfekt in Chrome, Firefox, IE und Opera.

P.S. Ich habe versucht, das zu leeren div direkt vom onclick-Aufruf, aber es wurde immer wieder eine fehlende Klammer gemeldet - ich weiß nicht warum ...

Um effizienten Code schreiben zu können, müssen Sie zunächst prüfen, ob DOM-fähig ist oder nicht, ob iframe vorhanden ist. Ich habe auch das Fangen benutzt.

$("#myModal").on("hidden.bs.modal", function() {

    var _this = this,
        youtubeSrc = $(_this).find("iframe").attr("src");

    if($(_this).find("iframe").length > 0){                     // checking if there is iframe only then it will go to next level
        $(_this).find("iframe").attr("src", "");                // removing src on runtime to stop video
        $(_this).find("iframe").attr("src", youtubeSrc);        // again passing youtube src value to iframe
    }
}

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

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

sie können die YouTube-API verwenden, um Ihr Video anzuhalten (player.stopVideo ()) oder anzuhalten (player.pauseVideo ()). hier der beispielcode.

HTML

Platzieren Sie diese Markierung in Ihrem modalen Inhalt.

<div id="player"></div>

youtube API laden und Player initialisieren

 var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'N8c20YDDHd8',
        });
      }

Stopp oder Pause Video auf modalem Schließen

     $('#videoModal').on('hidden.bs.modal', function (e) {
        // player.stopVideo();
        player.pauseVideo()
    });

Wenn Sie über mehrere Videomodale verfügen, können Sie am besten damit umgehen, ohne die API verwenden zu müssen:

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

Dabei werden alle iframes auf Ihren Modalen durchlaufen und zurückgesetzt, anstatt die src aller Ihrer iframes mit dem ersten Video in Ihrem modalen Set zu überschreiben.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    $("#myModal").modal('show');
    var url = $("#cartoonVideo").attr('src');

    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });

    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

    <!-- Modal HTML -->
    <div id="myModal" 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>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/LGWqUVFrfU4?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>     

verwenden Sie diesen Code noch einmal. es funktioniert gut für mich. 

Sehr einfacher Code zum Einfügen in Ihre Fußzeile:

<script language="javascript" type="text/javascript">

    $(function(){
            $('.close').click(function(){      
                    $('iframe').attr('src', $('iframe').attr('src'));
    });
            });
</script>