Question

较大的youtube电影Bootstrap模式。

大家好

我这里有一个jsfiddle - http://jsfiddle.net/kc0erdno/1/

我使用Bootstrap模式嵌入了响应式vimeo视频。

一切似乎都运转正常，但我无法改变视频的起始大小。

iframe的宽度=＆＃34; 1000＆＃34;但页面中视频的宽度为598。

如何增加页面中视频的大小。

    <!DOCTYPE html>
    <html lang="en-US">

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

      <style>

        .glyphicon-play{
          color: red;
          font-size: 4em;
          margin: 50px 0 0 0;
        }
        .modal-dialog{
          margin: 150px auto;
        }


        button.close{
          font-size:30px;
          position: absolute;
          top: 5px;
        }
        .modal-body {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0; 
            overflow: hidden;
        }

        .modal-body iframe{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 600px;
        }


      </style>


      <title>Trade Marketing</title>


    </head>
    <body>

      <div class="wrap">

        <div class="container">

          <div class="row">

            <div class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal"></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 embed-responsive embed-responsive-16by9">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                          </div>
                          <div class="modal-body">


                          <iframe src="https://player.vimeo.com/video/99676584?title=0&amp;byline=0&amp;portrait=0" width="1000" height="528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>'

                          </div>
                      </div>
                  </div>
              </div>

          </div>

        </div>

      </div><!--wrap-->


    <script src="javascripts/bootstrap.js"></script>
    </body>
    </html>

Answer 1

更改模态的样式...

.modal-dialog {
    width: 1000px;

    /* For responsive */
    max-width:90%;
    min-width:600px;
}

更大的youtube电影Bootstrap模式

1 个答案: