如何使视频的高度与html中的窗口相同

问题描述

我只想知道如何使视频标签与窗口高度相同。这是我的html文件中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./app.js" defer></script>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <video src="example video.mp4" id="video1">
</body>
</html>

这是我的CSS文件中的内容

* {
    padding: 0px;
    margin: 0px;
}
body {
    justify-content: center;
    align-content: center;
    text-align: center;
}
#video1 {
    
}

解决方法

您可以尝试

#video1 {
     display:block;
     height:100vh;
}

这可能有效：

body {
    height: 100%;
    margin: 0px;
}
#video1 {
    height: 100%;
}

通过将主体设置为全高，我们可以使内部视频也具有相同的高度。

height html size