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>

我的视频位于正确位置（居中），宽度正确且为8，但没有响应

如果那时我尝试使用引导类修复：

<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

你需要一个容器：

拥有center-text类
充当设置维度的容器，例如：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给出尺寸，以便响应视频有一些遵守的界限

Answer 2

您可以设置this.GetPM().Get("GetRecordSet");和max-width:" ";

CSS - 制作以小型为中心的响应式YouTube视频

2 个答案: