Bootstrap 3和Youtube在Modal中
我正在尝试使用Bootstrap 3中的Modalfunction来显示我的Youtubevideo。 它的工作原理，但我不能点击Youtubevideo中的任何button。
任何帮助吗？
这是我的代码：
<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&autoplay=1'; $('#myModal').modal('show'); $('#myModal iframe').attr('src', src); }); $('#myModal button').click(function () { $('#myModal iframe').removeAttr('src'); }); </script> 我在.modal.fade .modal-dialog类中发现了与CSS3转换（翻译）相关的问题（或者我在https://github.com/twbs/bootstrap/issues/10489上发现和描述的问题）。;
在bootstrap.css中，你会发现如下所示的行：
.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); }
用以下代码replace这些行将正确显示电影（在我的情况下）：
.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 { }
我把这个html / jQuerydynamic的YouTubevideo模式脚本放在一起，当点击触发器（链接）时，自动播放YouTubevideo，触发器还包含播放链接。 该脚本将find本地引导模态调用，并使用触发器中的数据打开共享模态模板。 见下面，让我知道你的想法。 我很想听听想法…
HTML MODAL TRIGGER：
<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 TEMPLATE：
<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">×</button> <div> <iframe width="100%" height="350" src=""></iframe> </div> </div> </div> </div> </div>
JQUERYfunction：
//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); }); }); }
function呼叫：
$(document).ready(function(){ autoPlayYouTubeModal(); });
FIDDLE： http : //jsfiddle.net/jeremykenedy/h8daS/1/
我有一个小费给你！
我会用：
$('#myModal').on('hidden.bs.modal', function () { $('#myModal iframe').removeAttr('src'); })
代替：
$('#myModal button').click(function () { $('#myModal iframe').removeAttr('src'); });
因为你也可以不用button来closures模式，所以在这个代码中，每当模态隐藏的时候它都会删除video。
这是另一个解决scheme： 强制HTML5 youtubevideo
只需在iframe的source属性中添加？html5 = 1，如下所示：
<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
在另一个线程中发现了这个问题，它在桌面和移动设备上运行良好 – 这与其他一些解决scheme似乎并不一致。 将此脚本添加到页面的末尾：
<!--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>
如果你不想编辑bootstrap CSS或者上面的所有内容都不能帮助你（就像我的情况一样），那么可以很容易地修复在Firefox上以模式运行video。
你只需要从模式中删除“淡入”类，并打开“in”类：
$('#myModal').on('shown.bs.modal', function () { $('#myModal').removeClass('in'); });
我已经在wordpress模板上解决了它：
$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">×</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>
MMhh …你可以发布你的整个HTML文件和你使用的浏览器/版本？
我重新创build了您的页面，并在3个浏览器（Chrome，FF，IE8）中进行了testing。 我能够停下来，没有任何问题，开始真棒WDS4预告片。 这是我的代码：
<!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&autoplay=1'; $('#myModal').modal('show'); $('#myModal iframe').attr('src', src); }); $('#myModal button').click(function () { $('#myModal iframe').removeAttr('src'); }); </script> </body> </html>
你可以尝试使你的模式播放器的Z-Index更高？
$('#myModal iframe').css("z-index","999");
<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">×</button> <div> <iframe width="100%" height="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </div>
使用$('#introVideo').modal('show'); 与bootstrap适当的触发冲突。 当你点击打开模式的链接时，它将在完成淡入淡出animation之后closures。 只要删除$('#introVideo').modal('show'); （使用bootstrap v3.3.2）
这是我的代码：
<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">×</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>
user3084135的答案很适合作为我的基地，但我也需要纳入：
- 本地托pipevideo的“video”标签以及外部托pipevideo的“iframe”标签
- 确保消息来源被删除，但是该消息被驳回
- 该解决scheme在Bootstrap响应式devise中工作
- 所有video自动播放模式打开
- 多种模式是可能的
我完成的解决scheme如下所示：
模式触发button
<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">
数据框属性可以是“iframe”或“video”，以反映适当的标签types：用于外部vid的iframe，用于本地托pipe的video。
自助式video容器
的iFrame：
<div align="center" class="embed-responsive embed-responsive-16by9"> <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe> </div>
video：
<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>
这两个都驻留在标准的Bootstrap响应模式的div。
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>
由于自动播放与iframe和video标签的工作方式不同，因此使用条件来处理每一个。 为了允许多个模式，使用通配符select器来识别它们（在我的案例中为portfolioModal1-6）。
我有这个相同的问题 – 我刚刚添加了字体真棒的CDN链接 – 评论下面的bootstrap解决了我的问题..没有真正解决它作为字体真棒仍然工作 –
<link href="twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
好。 我find了解决scheme。
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</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>
Bootstrap不提供模块popupfunction。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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&fs=1&rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen=""></iframe> <p>Your video</p> </div> </div> </div> </div>
$('#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">×</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>
