2并排youtube视频bootstrap 3

Question

我的响应式嵌入式YouTube存在问题，我并排有2个视频。它看起来很好，直到屏幕尺寸移动。它们不是堆叠在彼此之上，而是缩小到小盒子，就像在这张照片中一样。

这是我的页面http://www.pscompetitiveedge.com/references.html

页面顶部的HTML代码：

＆＃13;

＆＃13;

<h1>References</h1>

<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"></iframe>
<p>Click Above To View Testimonial Video!</p>
</div>
</div>

<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"></iframe>
<p>Click Above To View Peter In Seminar Action!</p>

</div>
</div></div>
<div class="clearfix"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有这些代码。 in＆＃34; custom.css：335＆＃34;

@media (max-width: 500px)
.col-sm-6 {
    width: 20% !important;
    float: left;
}

将其更改为：

@media (max-width: 500px)
.col-sm-6 {
    float: left;
}

Answer 2

以下响应嵌入适用于Bootstrap流体网格布局的任何排列（实际上任何不内联的元素）。我们需要在网络上的任何灵活容器中做的就是包含最初来自http://embedresponsively.com/的CSS。此外，我们需要从视频iframe或嵌入容器中删除固定的width和height属性。

＆＃13;

＆＃13;

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 1em;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="col-sm-6">
    <div class="embed-container">
      <iframe src="https://www.youtube.com/embed/oAPdNKTrBYA" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="embed-container">
      <iframe src="https://www.youtube.com/embed/fHFSX3Vd9D0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

全屏查看此代码段以观察其响应性。

Answer 3

尝试将此添加到之前的内容中：

.embed-responsive{
    width: 100%;
    display: block;
}