web-dev-qa-db-fra.com

Vidéo Youtube en cours de lecture à la fermeture de Bootstrap Modal

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

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

J'ai regardé en ligne et lu de nombreuses solutions mais aucune ne semble fonctionner. Voici le balisage ...

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

`

jqueryyoutubemodal-dialog
15
Stephen Tamlin

Tester ici dans FireFox 26.0 fonctionne comme prévu . Lorsque je ferme le Modal ou que je clique en dehors de celui-ci, puis le rouvre, la vidéo est de nouveau au démarrage et à l’arrêt.

EDIT 1

Reproduite dans Chrome, la vidéo continue en effet de jouer après la fermeture du Modal.

Essayez ces questions déjà répondues

Arrêtez une vidéo sur youtube avec JQuery?

Twitter Bootstrap Modal stop vidéo Youtube

Le meilleur moyen semble être d'utiliser l'API YouTube pour arrêter la vidéo. La réponse utilisant cette méthode est disponible dans les questions ci-dessus.

EDIT 2

Cette solution semble fonctionner.

Commencez par obtenir le fichier JS de cet article: API iframe YouTube: comment puis-je contrôler un lecteur iframe déjà présent au format HTML? et l’inclure sur la page.

Ajoutez ce JS après avoir chargé le script ci-dessus (juste avant la balise body fermeture)

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

Vous devrez également ajouter un identifiant à 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>
13
dizarter

Voici une réponse un peu plus légère basée sur la version de dizarter et sur l’une des solutions auxquelles il renvoie.

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

jetez un coup d'oeil à mon code Je n'ai pas besoin d'utiliser d'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>

Démo:https://jsfiddle.net/o0ftdvs1/

9
Bruno Ribeiro

Voici une alternative à la réponse de CloudKiller qui fonctionne réellement avec la lecture automatique, remplacez simplement .attr par .removeAttr comme suit:

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

Mais une version encore plus simplifiée et simplifiée consiste simplement à remplacer la variable src par une valeur vide:

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

Ainsi, le seul code que vous devez ajouter pour que cela fonctionne est:

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

Et si, comme moi, vous voulez que la vidéo soit lue automatiquement, arrêtez-la dès que vous cliquez sur fermer le modal Bootstrap.

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

Notez que j'ajoute l'argument "? Autoplay = 1" de manière dynamique. J'espère que ça aide quelqu'un.

2
Perry

Ceci est une solution qui a fonctionné pour moi (un peu hacky cependant):

Tout d'abord, j'ai enveloppé mon iframe avec un div nommé "VideoId" comme ça:

<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 créé cette fonction:

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

Et enfin, lors de la fermeture du bouton Panel (c'était un modal dans mon cas), j'ai ajouté un événement oncklick appelant ma fonction, comme ceci:

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

Bien sûr, si vous voulez le rappeler, 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>';

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

P.S. J'ai essayé de vider le div directement depuis l’appel onclick, mais il a continué à signaler une tranche manquante, - je ne sais pas pourquoi ...

1
parouden

Pour écrire du code efficace, nous devons d’abord vérifier sur le DOM prêt que iframe existe ou non, le cas échéant, passez au niveau suivant sinon ne faites rien. J'ai utilisé attraper aussi.

$("#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
Anand Deep Singh

Cette solution fonctionne bien pour Boostrap 4. Elle prend en charge de nombreux modaux différents sur la même page sans spécifier d'identificateur de modal. Voici la démo http://jsfiddle.net/hxtpoe/6k09f4x2/

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

vous pouvez utiliser l'API youtube pour arrêter (player.stopVideo ()) ou suspendre (player.pauseVideo ()) votre vidéo voici l'exemple de code.

HTML

Placez cette balise dans votre contenu modal.

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

Charger l'API youtube et initialiser le lecteur 

 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êtez ou mettez en pause la vidéo à la fermeture modale 

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

Si vous avez plusieurs modaux vidéo, la meilleure façon de le gérer sans recourir à l’API est la suivante:

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

Cela parcourt toutes les iframes de vos modaux et les réinitialise au lieu de remplacer le src de tous vos iframes dans la première vidéo de votre ensemble de modaux.

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>

utilisez ce code vérification une fois de plus. ça marche bien pour moi. 

0
DSK

Code très simple à placer dans votre pied de page:

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

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