web-dev-qa-db-fra.com

Twitter Bootstrap Modal stop Youtube vidéo

Je suis très novice en javascript et j'essaie d'utiliser Twitter bootstrap pour créer rapidement un site Web de qualité. Je sais que cela a quelque chose à voir avec jQuery, mais je ne sais pas comment arrêter ma vidéo lorsque j'appuie sur le bouton de fermeture ou sur l'icône de fermeture. 

Quelqu'un peut-il expliquer comment je peux arrêter la lecture de ma vidéo, car même lorsque je ferme la fenêtre, je l’entends toujours à l’arrière-plan. 

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
javascriptjquerytwitter-bootstrapyoutube
35
catchmikey

Il y a une bonne façon de faire cela - voir les commentaires dans la réponse approuvée à cet article .

Cependant, je ne pouvais pas travailler cette première fois et j'étais dans une course, alors j'ai fait un morceau de code plutôt horrible, qui fait l'affaire. 

Cet extrait "rafraîchit" la src de l'iframe incorporé, ce qui provoque son rechargement:

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
32
RobCalvert123

Je sais que je suis en retard de 2 ans ou plus, mais depuis lors, quelques changements ont été apportés. Avec B3, la nouvelle façon de procéder est la suivante:

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

Amusez-vous avec Bootstrap!

72
gmslzr

Si quelqu'un a toujours le problème, essayez ceci, cela a fonctionné pour moi:

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});
15
knightkiddo

Voici un moyen simple que j'ai trouvé pour faire jouer une vidéo dans une fenêtre modale, puis arrêter de jouer à la fermeture.

Utilisez le fichier .html pour charger l'iFrame avec votre vidéo dans le corps-modal lorsque celui-ci est affiché, puis remplacez le corps-modal par rien lorsqu'il est masqué.

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

Voici un exemple jsfiddle:

http://jsfiddle.net/WrrM3/87/

13
Nathan McFarland

Ici, je généralise la réponse de @ guillesalazar.

Cela réinitialisera n'importe quel iFrame dans n'importe quel modal d'amorçage (lorsque le modal est fermé):

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

Ajoutez ceci à votre mise en page et vous êtes prêt.

UPDATE: Code modifié pour les modaux avec plusieurs iFrames.

10
thekingoftruth

Vous devez d'abord vider l'iframe src, puis le configurer à nouveau.

Donc, ma réponse de travail:

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

Octobre 2014. Pour Bootstrap 3.

5
littlealien

Voici ma solution, elle résout les problèmes suivants à l'aide d'appels d'événement bootstrap:

  1. Lecture automatique du film lors de l'affichage du modal
  2. Arrêter le film quand le modal est caché

HTMLcarrousel dans modal, le premier élément actif est la vidéo iframe

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript lecture automatique lors de l'affichage de modal, puis réinitialiser l'URL et l'appliquer à nouveau à iframe src

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});
3
Brandon Franklin

Eu un modal avec de nombreuses vidéos. Mise à jour du code par @guillesalazar pour fermer plusieurs vidéos dans le modal.

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });
2
Lee Harris

Celui-ci le fait parfaitement: 

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

Si vous voulez cependant le faire démarrer à l’ouverture/arrêt du modal à la fermeture, utilisez ce code:

Mais assurez-vous d’ajouter enablejsapi=1 dans votre src, comme ceci par exemple: 

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();
2
nikola_wd

En développant la réponse de Guille ci-dessus, il s'agit d'une fonction d'accueil qui fonctionnera avec Bootstrap 3, la dernière version de youtube datée du 14 août, et fonctionne pour plusieurs vidéos/modaux sur une seule page. 

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
});
1
spiral

Un moyen beaucoup plus simple que toutes ces réponses est de remplacer la totalité de la réponse src. Cela fonctionne pour tous les modaux et vous pouvez ajuster la classe iframe selon vos besoins.

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });

1
Jonathan

Ma solution à ceci qui fonctionne pour Bootstrap 3 et le format moderne de YouTube embed est la suivante.

En supposant que votre vidéo soit intégrée à un Bootstrap 3 Modal standard avec id="#video-modal", ce simple bit de Javascript fera l'affaire.

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

J'ai vu des solutions proposées à ce problème impliquant l'utilisation du YouTube API, mais si votre site n'est pas un site https, ou si votre vidéo est intégrée au format moderne recommandé par YouTube, ou si l'option no-cookies est définie, alors ces solutions ne fonctionnent pas et vous obtenez l'effet "TV set to a channel channel" au lieu de votre vidéo.

J'ai testé ce qui précède sur tous les navigateurs sur lesquels je pouvais mettre la main et cela fonctionne de manière très fiable.

1
Dave Sag

J'ai utilisé une combinaison des réponses de Ruslanas Balčiūnas et de Nathan McFarland pour coder quelque chose qui fonctionnait bien pour moi. 

$('#myModal').on('hide',function(){
   $('.modal-body iframe').attr('src','');
});

Donc, fondamentalement, cela définit l'attribut src de la iframe à rien lorsque l'événement modal de fermeture est déclenché. Court et doux.

1
ckpepper02
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
0
Ruslanas Balčiūnas
 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});
0
Birendra Maharjan

La réponse de @ guillesalazaar n'était que la 1ère moitié de ma correction, alors je me suis senti obligé de partager ma situation au cas où cela aiderait quelqu'un à l'avenir. Moi aussi, j'ai une vidéo youtube intégrée, mais je mets la mienne à jouer automatiquement lorsque le cadre est chargé à l'aide de autoplay=1. Pour contourner le problème de lecture automatique lors du chargement de la page, mon URL youtube est stockée dans une variable qui définit la source iframe à l'aide d'un gestionnaire de clics. Pour résoudre ce problème, j'ai simplement supprimé le lien d'attribut source:

Mon URL pour déclencher la fenêtre modale:

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

Mes divs de fenêtre modale cachée:

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

Mon JS:

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});
0
Frankenmint