Question

我试图做一件非常简单的事情：将视频调整为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传递到视频元素的宽度和高度属性，但结果是一样的。视频似乎做了他们想做的事。

Answer 1

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

例外是iframe元素。在这里你应该指定宽度和高度（或者它将使用默认高度150px）

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

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

1 个答案: