首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Modal中的Bootstrap 3和Youtube

Modal中的Bootstrap 3和Youtube
EN

Stack Overflow用户
提问于 2013-09-05 03:45:39
回答 15查看 317.6K关注 0票数 175

我正在尝试使用Bootstrap 3中的Modal功能来显示我的Youtube视频。它可以工作,但我不能点击Youtube视频中的任何按钮。

对此有什么帮助吗?

下面是我的代码:

代码语言:javascript
复制
<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>
EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2013-09-06 18:21:51

我发现这个问题(或者我在https://github.com/twbs/bootstrap/issues/10489发现并描述的问题)与.modal.fade .modal-dialog类上的CSS3转换(转换)相关。

在bootstrap.css中,您将看到如下所示的行:

代码语言:javascript
复制
.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);
}

将这些行替换为以下代码将正确显示电影(在我的示例中):

代码语言:javascript
复制
.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 {

}
票数 117
EN

Stack Overflow用户

发布于 2014-05-13 19:03:44

我把这个html/jQuery动态YouTube视频模式脚本放在一起,当单击触发器(链接)时自动播放YouTube视频,触发器还包含要播放的链接。该脚本将找到本机引导模式调用,并使用触发器中的数据打开共享模式模板。请看下面,让我知道你的想法。我很想听听你的想法。

HTML模式触发器:

代码语言:javascript
复制
 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

HTML模式视频模板:

代码语言:javascript
复制
<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>

JQUERY函数:

代码语言:javascript
复制
//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);
    });   
  });
}

函数调用:

代码语言:javascript
复制
$(document).ready(function(){
  autoPlayYouTubeModal();
});

小提琴:http://jsfiddle.net/jeremykenedy/h8daS/1/

票数 41
EN

Stack Overflow用户

发布于 2013-10-02 21:44:48

我有一个建议给你!

我将使用:

代码语言:javascript
复制
$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal iframe').removeAttr('src');
})

而不是:

代码语言:javascript
复制
$('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});

因为你也可以在没有按钮的情况下关闭模式,所以有了这段代码,它就会在每次隐藏模式时删除视频。

票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18622508

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档