Youtube Video continue de jouer quand Bootstrap Modal se ferme

Je suis entrain de créer un site avec bootstrap qui peut être trouvé ici - http://www.branchingouteurope.com/digital-spark-testing/

Si vous sélectionnez l'image vidéo, vous verrez une fenêtre modale ouvrir une vidéo youtube. Le problème que j'ai c'est que lorsque la fenêtre modale est fermé, la vidéo continue à jouer. Je veux que cette vidéo s'arrête lorsque la fenêtre modale est fermé.

J'ai regardé en ligne et de lire beaucoup de solutions cependant, aucun ne semble fonctionner. Ici est la marque...

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

source d'informationauteur Stephen Tamlin

11

Test ici dans FireFox 26.0, fonctionne comme prévu.
Quand j'ai fermer la Modale ou cliquez sur l'extérieur, puis de re-ouvrir - vidéo est de retour pour démarrer et s'est arrêté.

EDIT 1

Reproduit dans Chrome, la vidéo, en effet, continue à jouer après le Modal est fermé.

Essayez déjà répondu à ces questions

Arrêter une vidéo youtube avec jquery?

Twitter Bootstrap Modal arrêter la vidéo sur Youtube

Le meilleur moyen semble être d'utiliser des API YouTube pour arrêter la vidéo. Réponse qui utilise cette méthode est disponible dans les questions ci-dessus.

EDIT 2

Cette solution semble fonctionner.

Tout d'abord, obtenir le JS à partir de ce post: YouTube iframe API: comment puis-je contrôler une iframe joueur qui est déjà dans le code HTML?
et l'inclure dans la page.

Ajouter ce JS après avoir chargé le script ci-dessus (juste avant la balise de fermeture body)
```
<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });
</script>
```
Vous devrez également ajouter un ID de la div contenant l'iframe, comme ci-dessous
```
<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>
```

Ici est un peu plus léger d'une réponse basée sur dizarter la version et l'une des solutions qu'il a des liens vers d'.

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

prendre un coup d'oeil à mon code je n'ai pas besoin d'utiliser une 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();
});

Et si comme moi vous souhaitez que la vidéo de la lecture automatique, puis de les amener à arrêter lorsque vous cliquez sur fermer dans le Bootstrap modale vous avez besoin de faire quelque chose comme ceci:

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

Avis que j'ai ajouté "?autoplay=1" arg dynamiquement. Espérons que l'aide à quelqu'un.

2

Ici est une alternative à CloudKiller réponse qui fonctionne réellement avec la lecture automatique, il suffit de changer .attr à .removeAttr comme suit:
```
jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src"));
```
Mais encore plus compacte/version simplifiée de ce est de simplement remplacer les src avec une valeur vide:
```
$('#myModal iframe').attr('src', '');
```
De sorte que le seul code que vous devez ajouter pour que cela fonctionne est:
```
jQuery('#myModal').on('hidden.bs.modal', function (e) {
    $('#myModal iframe').attr('src', '');
});
```

À écrire du code efficace, tout d'abord nous avons besoin de vérifier sur les DOM prêt que l'iframe est exister ou ne pas exister si donc, aller au niveau suivant, autrement, ne pas faire n'importe quoi. J'ai utilisé la capture également.

$("#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
    }
}

C'est une solution qui a fonctionné pour moi (un peu hacky tout de même):

Tout d'abord, j'ai enveloppé mon iframe div "VideoId"comme ceci:

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

Puis j'ai fait cette fonction:

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

Et enfin, sur la fermeture de mon bouton du Panneau (c'était un modal dans mon cas), j'ai ajouté un oncklick cas l'appel de ma fonction, comme ceci:

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

Bien sûr, si vous voulez l'appeler de nouveau, vous devez remplir le contenu de VideoId avec javascript comme suit:

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>';

Il fonctionne parfaitement dans Chrome, Firefox, IE et Opera.

P. S. j'ai essayé de vider le div directement à partir de la onclick de l'appelant, mais elle a gardé des rapports un manque de support, - je ne sais pas pourquoi...

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

utiliser ce code de vérifier encore une fois. il fonctionne pour moi gentiment.

Très simple code à placer dans votre pied de page:

<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){      
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>

vous pouvez utiliser l'API youtube pour Arrêter(le joueur.stopVideo()) ou la mettre en pause (le joueur.pauseVideo()) votre vidéo. ici l'exemple de code.

HTML

Placez cette balise dans votre modal de contenu.

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

Charge API youtube et initialiser joueur

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

Arrêter ou mettre en pause la Vidéo sur modale près

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

Vous devez vous connecter pour publier un commentaire.

EDIT 1

EDIT 2