调整窗口大小时调整嵌入视频的大小，同时保持纵横比答案

【问题标题】：Resize embedded videos when window is resized, while keeping aspect ratio调整窗口大小时调整嵌入视频的大小，同时保持纵横比
【发布时间】：2020-01-31 01:36:14
【问题描述】：

我正在尝试在保持宽高比的同时调整嵌入视频的大小。（在这种情况下是 16:9）

我在这个网站上找到了解决方案：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

如您所见，视频（我使用的是 vimeo）在用户调整窗口大小的同时很好地调整了大小。但是我无法让它与这个 Javascript 代码一起工作。我熟悉 HTML 和 CSS，但我是 Javascript 的菜鸟。

这是我的 HTML，我通常会使用外部 CSS，但在这里我复制了我正在尝试做的事情并对其进行了简化：

<!DOCTYPE html>
<html lang="EN" style="height: 100%;">
    <head>
        <meta name="viewport" content="width: device-width; initial-size: 1.0;">

        <style>
            body{
                background-color: darkolivegreen;
            }
            table{
                width: max-content;
                height: max-content;
                position: absolute;
            }
            iframe{
                width: 450px;
                height: 253.13px;
            }
            #table1{
                left: 4.2vw;
                top: 33vh;
            }
            #table2{
                right: 4.2vw;
                top: 33vh;
            }
        </style>

    </head>
    <body>
        <table id="table1">
            <tr>
                <td>
                    <iframe src="https://player.vimeo.com/video/385145267?color=ffffff" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </td>
            </tr>
        </table>
        <table id="table2">
            <tr>
                <td>
                    <iframe src="https://player.vimeo.com/video/385145267?color=ffffff" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </td>
            </tr>        
        </table>
    </body>

</html>

【问题讨论】：

停止使用表格 - 这是老派。请改用嵌套的
标签。
感谢您的建议

【解决方案1】：

在这种风格中，我会有这样的东西：

iframe{
width: <multiple of 16>vh
height: <multiple of 9>vh
}

或者您可以将 vh 替换为 vw、vmin、vmax 以获得不同的效果

em 相对于元素的字体大小（2em 表示当前字体大小的 2 倍）
ex 相对于当前字体的 x 高度（很少使用）
ch 相对于“0”的宽度（零） rem 相对于根元素的字体大小
vw 相对于视口宽度的 1%*
vh 相对于视口高度的 1%*
vmin 相对于视口*小尺寸的 1% vmax 相对于视口*大尺寸的 1%
% 相对于父元素

通过https://www.w3schools.com/

【讨论】：

试过了，成功了！谢谢你。我唯一的问题是，现在在调整窗口大小时，视频有些摆动。知道我应该解决这个问题吗？ position: absolute 没有解决问题
人类天生不准确，我们移动东西的速度略有不同，这可能是摆动的原因。对于相对单位，vh 使用高度，vw 使用宽度，vmin 使用 vh 和 vw 的值，vmax 使用 vh 和 vw 的最大值。也许你可以使用 %
最后我会选择 vh 和 vw。