html - CSS - 制作小型居中响应式 youtube 视频

Question

我正在尝试修复我网站上的一个 CSS 错误。我目前正在使用 Bootstrap 框架，并且正在尝试制作响应式视频。

当我这样做时:

<div class="col-lg-12">
  <iframe  width="560" height="315" src="https://www.youtube.com/embed/3Vkma-S35Y4?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen> 
  </iframe>

我的视频位置正确(居中)，宽度和八位正确，但没有响应

如果然后我尝试使用 Bootstrap 类进行修复，使用:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0">
  </iframe>
</div>

视频现在可以响应了，但是太大了，如果我尝试调整它的大小，它就不会停留在正确的位置。

我该如何解决？

Answer 1

您需要一个容器:

1. 有 center-text 类
2. 作为容器设置维度 eg: col-md-x

我只是在这里发布我最近工作的一些代码，给你一个想法:

<div class="col-sm-4 right-border">
  <div class="detail-image text-center">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/waSnKOK_f3M?rel=0?html5=1"></iframe>
    </div>
  </div>
</div>

col-sm-4 给出了维度，因此响应式视频有一些边界要遵守