Question

要为YouTube视频制作响应式4x3视频，Bootstrap网站会说：

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

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

.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

我试图在jsfiddle中制作一个演示，但它产生的结果与我的浏览器不同。四个小时后，我找到了解决方案。为了使iframe都居中并且响应，请将.text-center添加到直接容器div并使iframe元素的位置相对：

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

这是.youtube类：

.youtube {
  max-width: 400px;
  max-height: 300px;
  position: relative !important;
}

完整的HTML：

<div class="container">
<div class="row">
<main class="col-sm-8 col-main">
<article class="post-main ">
<section>
<div class="embed-responsive embed-responsive-4by3 col--12 text-center">
  <iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/KPZ8HHRR1A0"></iframe></div>
</section>
</article>
</main>
</div><!-- /.row -->
</div><!-- /.container -->

Answer 2

整个早晨都在为此苦苦挣扎。我的视频是动态的，因此无法确定它们是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>

jQuery：

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();

Bootstrap响应式视频，但最大宽度为中心

2 个答案: