zoukankan      html  css  js  c++  java
  • Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频

    I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video.

    Any help on this?

    Here's my 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&autoplay=1';
            $('#myModal').modal('show');
            $('#myModal iframe').attr('src', src);
        });
    
        $('#myModal button').click(function () {
            $('#myModal iframe').removeAttr('src');
        });
    </script>
    

    I found this problem (or the problem I found and described at https://github.com/twbs/bootstrap/issues/10489) related to CSS3 transformation (translation) on the .modal.fade .modal-dialog class.

    In bootstrap.css you will find the lines shown below:

    .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);
    }
    

     Replacing these lines with the following will show the movie correctly (in my case):

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

     http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

  • 相关阅读:
    Oracle之配置节点间相互信任机制测试
    记crt 在windows与linux服务器之间利用ftp进行文件的上传下载
    虚拟机防火墙的相关设置
    Linux下载安装mysql5.7教程
    linux下使用Oracle常用命令
    Linux的常用命令
    ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file '/u01/app/oracle/product/19.2.0/db_1/dbs/initsanshi.ora'报错
    Linux下创建Oracle19C的数据库实例
    redhat7.6Linux安装Oracle19C完整版教程
    Python模拟登录的几种方法
  • 原文地址:https://www.cnblogs.com/nightnine/p/6211857.html
Copyright © 2011-2022 走看看