HTML - 无法正确调整视频大小答案

【问题标题】：HTML - Can't resize video properlyHTML - 无法正确调整视频大小
【发布时间】：2015-12-23 12:44:00
【问题描述】：

我正在尝试做一件非常简单的事情：将视频大小调整为屏幕宽度的 100% 和屏幕高度的 100%。但是，当我将宽度设置为 100% 时，高度似乎会自动调整。

这是我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/index.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="screen_container">
            <video autoplay="autoplay" class="cover_vid" loop>
                <source src="videos/boats.mp4" type="video/mp4" />
            </video>
            <input type="button" id="back_abt" class="gen_design" value="Leave">
        </div>
        <script src="scripts/specific1.js"></script>
    </body>
</html>

CSS：

#screen_container
{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

.cover_vid
{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

如果可能，我会尽量避免使用 JavaScript。我什至尝试将屏幕分辨率从 PHP 传递到视频元素的宽度和高度属性，但结果是一样的。视频似乎随心所欲。

【问题讨论】：

您可能需要检查this question。

标签： html css video

【解决方案1】：

我的理解是视频将保持宽高比。您指定宽度并将高度设置为自动。

iframe 元素除外。在这里您应该指定宽度和高度（或者它将使用默认高度 150 像素）

尝试此链接以获取更多信息：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

【讨论】：