twitter-bootstrap - Bootstrap 响应视频，但具有最大宽度和居中

Question

要为 YouTube 视频嵌入响应式 4x3 视频，Bootstrap 网站说这样做:

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item youtube" src="…"></iframe>
</div>

但我希望视频的最大宽度为 400 像素。所以我定义了一个类:

.youtube {
    max-width: 400px;
    max-height: 300px;
}

我试过这个并且它有效:

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item youtube" src="…"></iframe>
</div>

但是对于我的一生，我无法使这个最大宽度(但响应低于该最大值)iframe 居中。我已经尝试添加 .center-block至 .embed-responsive和 .embed-responsive-item ，但它什么也不做。有任何想法吗？

Answer 1

整个上午都在为此苦苦挣扎。我的视频是动态的，所以不能确定它们是 4x3。我的 Bootstrap 4/JQuery 解决方案

html:

<div class="form-row">
  <div class="col-sm-1 col-lg-3"></div>
  <div class="col-sm-10 col-lg-6 text-center">
    <!-- this code is in a foreach loop, hence @item.Link -->
    <iframe width="560" height="315" src="@item.Link"></iframe>
  </div>
  <div class="col-sm-1 col-lg-3"></div>
</div>

查询:

function resizeIframes() {
  var $allVideos = $('iframe');

  $allVideos.each(function () {
    $(this)
        .data('aspectRatio', this.height / this.width)

        // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function () {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function () {
        var newWidth = $(this).parent().width();

        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.data('aspectRatio'));
    });

    // Kick off one resize to fix all videos on page load
  }).resize();
}

resizeIframes();