webentwicklung-frage-antwort-db.com.de

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

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

Wenn Sie das Videobild auswählen, wird in einem modalen Fenster ein Youtube-Video geöffnet. Mein Problem ist, dass das Video weiterhin läuft, wenn das modale Fenster geschlossen ist. Ich möchte, dass dieses Video angehalten wird, wenn das modale Fenster geschlossen wird.

Ich habe online nachgeschlagen und viele Lösungen gelesen, jedoch scheint keine zu funktionieren. Hier ist der Abschlag ...

<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="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="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

`

15
Stephen Tamlin

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

BEARBEITEN 1

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

Versuchen Sie diese bereits beantworteten Fragen

Stoppen Sie ein Youtube-Video mit Jquery?

Twitter Bootstrap Modal Stop Youtube Video

Der beste Weg scheint zu sein, die YouTube-API zum Stoppen des Videos zu verwenden. Antworten, die diese Methode verwenden, finden Sie in den obigen Fragen.

BEARBEITEN 2

Diese Lösung scheint zu funktionieren.

Holen Sie sich zunächst die JS aus diesem Beitrag: YouTube-iframe-API: Wie kontrolliere ich einen iframe-Player, der bereits im HTML-Format enthalten ist? und füge es auf der Seite ein.

Fügen Sie diese JS hinzu, nachdem Sie das obige Skript geladen haben (unmittelbar vor dem schließenden body-Tag).

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

Sie müssen außerdem eine ID zum div hinzufügen, die den iframe enthält (siehe unten)

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

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

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/

9
Bruno Ribeiro

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

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.

2
Perry

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="&nbsp;";
};

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 ...

1
parouden

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
    }
}
1

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);
});
0
Łukasz

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()
    });
0
patelarpan

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.

0
sandman8888
<!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. 

0
DSK

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>
0
David Sanchez