Question

所以我在全宽浏览器中以我喜欢的方式拥有嵌入式视频，但当它缩小到小尺寸浏览器及以下时，我无法找到一种方法来获得响应，所以它保持不变以浏览器为中心。

我正在使用Bootstrap的网格系统为它旁边的文本做出响应。当浏览器达到中等大小及以下时，我希望将视频堆叠在文本下方，并且当它在中等大小的浏览器中时，我已经成功地使视频以媒体查询为中心，但是无法将视频集中在小视频中和超小的浏览器尺寸。这有意义吗？

.section1Text {
  padding-top: 35px;
}

.section1Text h2 {
  font-weight: 100;
  font-size: 2.9em;
  letter-spacing: 1px;
}

.section1Btn {
  background-color: #2e3233;
  border-style: solid;
  border-width: 0px 0px 3px 0px;
  border-color: #121313;
  border-radius: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 30px;
  font-size: 1.45em;
  color: #ffffff;
  font-weight: 700;
  transition: all 0.3s ease-in-out 0s;
}

.video-responsive {
  padding-top: 45px;
  padding-bottom: 45px;
  float: right;
}

.video-responsive iframe {
  width: 560px;
  height: 315px;
}


/*section1 media queries*/

@media (max-width: 992px) {
  .video-responsive {
    padding-top: 45px;
    padding-bottom: 45px;
    margin-right: 35px;
  }
  .video-responsive iframe {
    width: 672px;
    height: 378px;
  }
}

<section class="section1">
  <div class="container">
    <div class="row">
      <div class="section1Text col-md-4">
        <h2 class="text-center">What We Have to Offer</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
        <div class="col-xs-8 col-xs-offset-2">
          <a class="btn section1Btn btn-block" href="#">Learn More</a>
        </div>
      </div>
      <div class="video-responsive">
        <iframe width="560px" height="315px" src="https://www.youtube.com/embed/bsY2GdBEvSA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

Answer 1

对于视频响应，请使用百分比（下面的示例）。用百分比混乱，直到它按照你想要的方式工作。您可能还需要一个容器来放入视频。

.video-responsive iframe {
        width: 100%;
        height: 50%;
    }

如何让嵌入式视频在缩小的浏览器中响应

1 个答案: