Html 垂直对齐两个类与youtube

我有一个40%全屏的盒子图像，在这个盒子下面我有一个youtube视频iframe，但我不能调整高度

我不能在images类中插入视频，因为该类有一个单独的函数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>

这是一个结果，为什么它的高度‘大

---

如果您只想得到编译后的答案，请点击这里：

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

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

录像带怎么了？它会自动调整，因为它是一个

这应该行得通

更新 要回答如何在div内制作视频的问题，即在一个容器内制作视频，该容器不是div的100%主体，而div是上述容器的40%，以下是答案：

HTML:

假设大容器代表您的大容器。 我还添加了颜色，这样你就可以玩它了

---

顺便说一句，如果你想把它联合起来，那么我建议你使用s，然后用它做专栏。

不起作用，这是一个结果，如果你注意到与方框图像不疏远，我希望视频框与方框图像保持一致，每种分辨率都是。视频44 40%的整体？如果没有，占40%的是什么？你能告诉我这些值是什么吗？抱歉花了这么长时间…是的是40%，因为代码已经发布了宽度，它是好的和响应，但有高度的问题，查看网站，所以你希望.video44是全宽的，视频是40%的？或者你想要。video44是全宽的40%，如果是这样的话，视频就不能是100%？我想要视频是全屏的40%，因为盒子图像是全屏幕的40%，所以如果我想要allineate这两个类，很可能设置allso videobox为40%

<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 iframe {
  width: 40vw;
  height: calc((315 / 560) * 40vw);
  height: -moz-calc((560 / 315) * 40vw);
}

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

#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%;
}