将两个类与 youtube 垂直对齐

Question

我有一个占全屏 40% 的框图像，在此框下方我有一个 youtube 视频（iframe），但我无法在响应式（高度）中对齐

我无法在图像类中插入视频，因为该类有一个单独的函数 ajax

然后我如何对齐到两个类宽度的 40%？？

这是我用过的代码，它对宽度有好处，但不明白，因为高度很大，不尊重 youtube 格式：

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

这是一个CSS：

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

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

这是结果，为什么高度'大？？

http://s22.postimg.org/5ayakawch/tst_Kid.png

Answer 1

如果你只想要编译后的答案，这里是：

.video44 iframe{width: 40vw;height:calc((315/560)*40vw);height:-moz-calc((560/315)*40vw);}

解释：

您的 HTML：

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

说width="560" height="315"。所以当你设置width: 40%时，它会占据屏幕的40%，对吗？但正如您在 HTML 中看到的那样，youtube 格式实际上并不存在，它们只有width="560" height="315"。

因为这里“%”被用作文档宽度的百分比，所以更改为“vw”可能更容易。所以现在视频将是40vw。

此外，如果我们使用calc()，我们也许能够找到该视频的未指定比例。

所以我们现在宽度与高度的差异和比例是宽度/高度，因此我们将使用calc(315 / 560)。然后我们将它乘以我们想要的大小，在本例中为40vw。就是这样！看起来怎么样？

.video44 iframe {
  width: 40vw;
  height: calc((315 / 560) * 40vw);
  height: -moz-calc((560 / 315) * 40vw);
}

您还需要添加 -moz-，因为 Mozilla 并不完全支持它。

.video44 怎么了？它会自动调整，因为它是 <div>。

这应该可行。

更新 要回答“如何在div 中制作视频，该视频在不是div 的主体 100% 和上述容器的 div 40% 的容器中”，这里是答案：

HTML：

<div id="big_container">
    <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>
</div>

CSS：

#big_container {
  width: 100%;
  height: 25em;
  background-color: red;
}

.video44 {
  width: 40%;
  height: calc(560px / 315 * 100);
  background-color: blue;
}

iframe {
  width: 100%;
  height: 100%;
}

#big_container 应该代表您更大的容器。 我还添加了颜色，以便您可以玩弄它。

顺便说一句，如果你想“alliniate”它，那么我建议你使用<section>s，然后用它创建列。