Bootstrap 3 et Youtube en modal

Question

J'essaie d'utiliser la fonctionnalité Modal de Bootstrap 3 pour afficher ma vidéo Youtube. Cela fonctionne, mais je ne peux cliquer sur aucun bouton de la vidéo youtube.

Toute aide sur ceci?

Voici mon code:

 <div id="link">My video</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>
 

Merci!

Answer 1

J'ai trouvé ce problème (ou le problème que j'ai trouvé et décrit à l' adresse https://github.com/twbs/bootstrap/issues/10489 ) lié à la transformation CSS3 (traduction) sur la classe .modal.fade .modal-dialog .

Dans bootstrap.css, vous trouverez les lignes illustrées ci-dessous:

 .modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
 

Remplacer ces lignes par ce qui suit affichera le film correctement (dans mon cas):

 .modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {

}
 

Answer 2

J'ai mis en place ce code html/jQuery dynamique de la vidéo de YouTube modal script auto joue le YouTube de la vidéo lorsque le déclencheur (lien) est cliqué, le déclencheur contient également le lien à jouer. Le script va trouver le natif de bootstrap modal appel et ouvrez le modal modèle avec les données de la gâchette. Voir ci-Dessous et laissez-moi savoir ce que vous en pensez. J'aimerais entendre les pensées...

HTML MODAL DE DÉCLENCHEMENT:

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

HTML MODAL VIDÉO MODÈLE:

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div>
          <iframe width="100%" height="350" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

LA FONCTION JQUERY:

//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal(){
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data( "target" ),
    videoSRC = $(this).attr( "data-theVideo" ), 
    videoSRCauto = videoSRC+"?autoplay=1" ;
    $(theModal+' iframe').attr('src', videoSRCauto);
    $(theModal+' button.close').click(function () {
        $(theModal+' iframe').attr('src', videoSRC);
    });   
  });
}

L'APPEL DE LA FONCTION:

$(document).ready(function(){
  autoPlayYouTubeModal();
});

Le VIOLON: http://jsfiddle.net/jeremykenedy/h8daS/1/

Answer 3

J'ai un conseil pour vous!

J'utiliserais:

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

au lieu de:

 $('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});
 

Parce que vous pouvez également fermer le modal sans le bouton, il supprimera donc la vidéo à chaque fois que le modal sera masqué.

Answer 4

Nous avons trouvé ceci dans un autre fil, et cela fonctionne très bien sur les ordinateurs de bureau et MOBILE, ce qui ne semblait pas être vrai avec certaines des solutions. Ajoutez ce SCRIPT à la fin de votre page.

     <!--Script stops video from playing when modal is closed-->
    <script>
    $("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });
    </script>   
 

Answer 5

Voici une autre solution: Force HTML5 youtube video

Ajoutez simplement? Html5 = 1 à l'attribut source de l'iframe.