课堂上的视频 youtube 响应式

Question

嗨，我有这个网站 bit.ly/1EfgOsM，我希望带有 youtube 视频的视频框与框图像对齐，图像框的宽度为 40%，所以我想要的视频框也响应宽度为 40 % , 视频框我属于 imagebox 的另一类，因为 imgagebox 有一个 ajax 函数分离

如何对视频进行allineate ??

请查看图片http://s22.postimg.org/5ayakawch/tst_Kid.png

我试试这段代码，宽度不错，但高度更大

<div class="video44"><iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>



.video44 { width: 40%; 
    font-family: 'Raleway_Medium';
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.video44  {             
    height: auto; 
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
}
.video44  iframe{
    left:0;
    top:0;
    height: 100%;
    width:100%;
    position:absolute;
}

Answer 1

我认为答案就在padding-bottom

为了保持 100% 宽 div 的比例，我们需要将 padding-bottom 设置为 56.25% (9/16)....

但我们的父 div 不是 100% 宽...它是 40% 宽，所以我们需要再次计算该数字

因此 56.25 / (4 * 10) 给了我们 22.5 但我们实际上不需要自己这样做，因为我们可以使用 calc。

.video44 {
  width: 40%;
  font-family: 'Raleway_Medium';
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  height: auto;
  margin: auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.video44 {
  /*padding-bottom:56.25%;*/
  /* padding needs adjusting to maintain aspect ratio */
  /* 16:9 = 56.25 when 100% wide.
  /* 40% wide would be 56.25 * 4/10 = 
*/
  padding-bottom: calc(56.25% * (4 / 10));
}
.video44 iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

<div class="video44">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>