html - 与 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假设代表你更大的容器。我还添加了颜色，以便您可以使用它。

顺便说一下，如果你想“蒜化”它，那么我建议你使用 <section> s，然后用它制作列。