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。

并且不要违反任何关于多个问题的规则，但是如果有办法简单地使用bootstrap cols（例如，col-xs-12）来执行响应并调整大小，这将是包装器的首选解决方案。

非常感谢帮助。

Answer 1

你需要添加课程＆＃34; modal-lg＆＃34;在<div class="modal-dialog modal-lg" role="document">

<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>

用于YouTube不缩放的模态iFrame

1 个答案: