iframe - YouTube 的模态 iFrame 无法缩放

Question

这应该很简单。我想在 Bootstrap 3 模式中增加我的 YouTube 的桌面大小，同时在较小的设备上保持其响应能力。为了获得响应能力，我使用了一个包装器。这很合理。但我无法让 iFrame 在桌面上放大。这是我用于模态的代码:

<div class="modal fade" id="trailer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <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>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body modalTrailer">
            <iframe width="550" height="350" src="http://www.youtube.com/embed/lgrVfuni7Bg" frameborder="0"  allowfullscreen ></iframe>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <!--  <button type="button" class="btn btn-primary">Save changes</button>-->
          </div>
        </div>
      </div>
    </div>

相关的CSS是:

div.trailer {
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: center; 
}

.modalTrailer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.modalTrailer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

网址是: http://www.antboythemovie.com/index2.html .

并且不要违反关于多个问题的任何规则，但是如果有一种方法可以简单地使用引导 cols(例如 col-xs-12)进行响应和调整大小，这将是包装器的首选解决方案。

非常感谢您的帮助。

Answer 1

您需要在 <div class="modal-dialog modal-lg" role="document"> 中添加类“modal-lg”

<div class="modal fade" id="trailer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <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>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body modalTrailer">
            <iframe width="550" height="350" src="http://www.youtube.com/embed/lgrVfuni7Bg" frameborder="0"  allowfullscreen ></iframe>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <!--  <button type="button" class="btn btn-primary">Save changes</button>-->
          </div>
        </div>
      </div>
    </div>