Question

我有这个网站bit.ly/1EfgOsM，我希望带有youtube视频的视频盒与盒子图像一致，图像框的宽度是40％所以我想要的视频框也是宽度为40的响应％，视频盒我在另一个类方面对于imagebox因为imgagebox分离了ajax函数

如何整合视频？

查看图片，请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 的比率，我们需要将填充底部设置为56.25％（9/16）....

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

因此 56.25 /（4 * 10）给我们 22.5 ，但我们实际上并不需要自己这样做，因为我们可以使用calc。< / p>

.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>

视频youtube在课堂上的响应

1 个答案: