在 window 调整大小时调整嵌入视频的大小，同时保持宽高比

Question

我正在尝试调整嵌入式视频的大小，同时保持其纵横比。（在本例中是 16:9）

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

如您所见，视频（我使用的是 vimeo）在 window 由用户调整大小时得到了很好的调整。但是我无法让它与这个 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>

Answer 1

在样式中我会有这样的东西：

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

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

em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero) rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

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

在 window 调整大小时调整嵌入视频的大小，同时保持宽高比

Resize embedded videos when window is resized, while keeping aspect ratio

html

javascript

css

resize

aspect-ratio