Bootstrap 3 et Youtube dans Modal

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

ça vous aide?

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>
133
demandé sur alex 2013-09-04 23:45:38

15 réponses

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

dans bootstrap.css, vous trouverez les lignes suivantes: 

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

}
95
répondu Bass Jobsen 2014-07-31 14:56:34

j'ai mis en place ce html/jQuery dynamique script modal vidéo YouTube qui joue automatiquement la vidéo YouTube lorsque le déclencheur (lien) est cliqué, le déclencheur contient également le lien de jouer. Le script trouvera l'appel modal Bootstrap natif et ouvrira le modèle modal partagé avec les données du déclencheur. Voyez ci-dessous et dites-moi ce que vous en pensez. J'aimerais entendre les pensées...

HTML DÉCLENCHEUR MODAL: 

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

HTML MODAL VIDEO 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 FONCTION: 

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

le violon: http://jsfiddle.net/jeremykenedy/h8daS/1 /

32
répondu developernator 2014-05-13 11:03:43

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, donc là pour avec ce code, il va supprimer la vidéo à chaque fois que le modal se cachera.

16
répondu Jeffrey Bouva 2013-10-02 13:44:47

Voici une autre solution: Force HTML5 youtube video

juste ajouter ?html5=1 à l'attribut source sur l'iframe, comme ceci: 

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
13
répondu Chris Scheler 2017-05-23 12:34:27

a trouvé cela dans un autre fil, et il fonctionne très bien sur le bureau et mobile - qui est quelque chose qui ne semble pas vrai avec certaines des autres 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>
11
répondu user2232930 2017-03-09 20:17:43

si vous ne voulez pas éditer le bootstrap CSS ou tout ce qui précède ne vous aide pas du tout (comme dans mon cas), il y a une solution facile pour faire tourner la vidéo dans un modal sur Firefox.

il suffit de supprimer la classe "fade" du modal et comme il ouvre la classe "in", aussi: 

$('#myModal').on('shown.bs.modal', function () {
    $('#myModal').removeClass('in');
});
4
répondu 0xC0FF33 2014-03-18 19:59:01

j'ai résolu sur wordpress template: 

$videoLink ="http://www.youtube.com/watch?v=yRuVYkA8i1o;".   
<?php
    parse_str( parse_url( $videoLink, PHP_URL_QUERY ), $my_array_of_vars );
    $youtube_ID = $my_array_of_vars['v'];    
?> 
<a class="video" data-toggle="modal" data-target="#myModal" rel="<?php echo $youtube_ID;?>">
    <img src="<?php bloginfo('template_url');?>/assets/img/play.png" />
</a>

<div class="modal fade video-lightbox" id="myModal" 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">&times;</button>
            </div>
            <div class="modal-body"></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script> 
    jQuery(document).ready(function ($) {
        var $midlayer = $('.modal-body');     
        $('#myModal').on('show.bs.modal', function (e) {
            var $video = $('a.video');
            var vid = $video.attr('rel');
            var iframe = '<iframe />';  
            var url = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1";
            var width_f = '100%';
            var height_f = 400;
            var frameborder = 0;
            jQuery(iframe, {
                name: 'videoframe',
                id: 'videoframe',
                src: url,
                width:  width_f,
                height: height_f,
                frameborder: 0,
                class: 'youtube-player',
                type: 'text/html',
                allowfullscreen: true
            }).appendTo($midlayer);   
        });

        $('#myModal').on('hide.bs.modal', function (e) {
            $('div.modal-body').html('');
        }); 
    });
</script>
4
répondu Bijaya Kumar Oli 2014-12-02 10:42:28

Bootstrap fournit la fonctionnalité pop-up modale hors de la boîte. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" href="#modal-video"><i class="fa fa-play"></i> watch video</a>
<div class="modal fade" id="modal-video" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close <i class="fa fa-times"></i></button>
      </div>
      <div class="modal-body">
        <iframe type="text/html" width="640" height="360" src="//www.youtube.com/embed/GShZUiyqEH0?rel=0?wmode=transparent&amp;fs=1&amp;rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen=""></iframe>
        <p>Your video</p>
      </div>
    </div>
  </div>
</div>
2
répondu jagdish.narkar 2018-01-09 09:37:11

MMhh... Pouvez-vous afficher votre html doc en entier et quelle version du navigateur vous utilisez?

j'ai recréé votre page et testé dans 3 navigateurs (Chrome, FF, IE8). J'ai pu m'arrêter et démarrer la super caravane WDS4 sans aucun problème. Voici mon code: 

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jq.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="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>
  </body>
</html>

vous pourriez essayer d'amener l'indice Z de votre lecteur modal plus haut dans la pile?

$('#myModal iframe').css("z-index","999");

0
répondu TyMayn 2013-09-04 20:20:13 
<a href="#" class="btn btn-default" id="btnforvideo" data-toggle="modal" data-target="#videoModal">VIDEO</a>

<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="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
0
répondu FahadAkram 2015-01-22 08:23:10

utilisant $('#introVideo').modal('show'); est en conflit avec le déclenchement de bootstrap. Lorsque vous cliquez sur le lien qui ouvre le Modal, il se ferme immédiatement après avoir terminé l'animation fade. Il suffit de supprimer le $('#introVideo').modal('show'); (en utilisant bootstrap v3.3.2)

Voici mon code: 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>


<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" 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-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

<script>
  //JS

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});


$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
})
</script>
0
répondu Imadeddine Bouziani 2015-03-19 10:32:01

la réponse de l'utilisateur3084135 a bien fonctionné comme base pour moi, mais j'ai aussi eu besoin d'incorporer:

  1. La "vidéo" tag pour hébergé localement de la vidéo ainsi que la balise "iframe" pour l'extérieur-vidéo hébergée
  2. S'assurer que la source a été enlevée mais le modal a été rejeté
  3. La solution travaillé dans un Bootstrap responsive design
  4. toutes les vidéos auto-play sur modal open
  5. Plusieurs modèles sont possibles

Ma solution finale ressemble à ceci:

BOUTON DE DÉCLENCHEMENT MODAL 

<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">

l'attribut data-frame peut être" iframe "ou" video " pour refléter le type de balise approprié: iframe pour les vidéos externes, vidéo pour les hébergés localement.

BOOTSTRAP RESPONSIVE VIDEO CONTAINERS

iFrame: 

<div align="center" class="embed-responsive embed-responsive-16by9">
  <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

vidéo: 

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video width="640" height="364" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>                               
</div>

ces deux-là résident dans la norme Bootstrap responsive modal divs.

JQUERY SCRIPT 

<script>
 $(document).ready(function(){
    function autoPlayModal(){
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function() {
        var theFrame = $(this).data( "frame" );
        var theModal = $(this).data( "target" );
        videoSRC = $(this).attr( "data-theVideo" ); 
        if (theFrame == "iframe") {
          videoSRCauto = videoSRC+"?autoplay=1" ;
        } else {
          videoSRCauto = videoSRC;
          $("[id*=portfolioModal] video").attr('autoplay','true');
        }
        $(theModal+' '+ theFrame).attr('src', videoSRCauto); 
        $("[id*=portfolioModal]").on('hidden.bs.modal', function () {
            $("[id*=portfolioModal] "+ theFrame).removeAttr('src');
        })
      });
    }

  autoPlayModal();
});
</script>

puisque autoplay fonctionne différemment avec iframe et les balises vidéo, un conditionnel est utilisé pour traiter chacun. Pour permettre plusieurs modaux, un sélecteur de jokers est utilisé pour les identifier (portfolioModal1-6 dans mon cas).

0
répondu awvidmer 2015-06-05 21:03:34

j'ai eu ce même problème - je venais d'ajouter la police-liens cdn impressionnant - commentant le bootstrap un ci-dessous résolu mon problème.. n'a pas vraiment de le résoudre comme la police impressionnant encore travaillé - 

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
0
répondu Fstarocka Burns 2016-06-26 10:41:56

Ok. J'ai trouvé une solution. 

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h3 class="modal-title" id="modal-login-label">Capital Get It</h3>
                    <p>Log in:</p>
                </div>

                <div class="modal-body">

                    <h4>Youtube stuff</h4>



             <iframe src="//www.youtube.com/embed/lAU0yCDKWb4" allowfullscreen="" frameborder="0" height="315" width="100%"></iframe>       
             </div>


                </div>

            </div>
        </div>
    </div>
0
répondu Mwangi Thiga 2017-03-11 11:11:05 

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});

$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>

<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" 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-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
-3
répondu Kondal 2017-10-11 14:02:43