在html5 + css中控制栏比视频宽

r6vfmomb 于 2023-09-28 发布在 HTML5

关注(0)|答案(5)|浏览(228)

我试着在html5中加入width和height属性来控制我的视频帧的尺寸，但它似乎并没有按照控制栏的比例变大或变小。我的意思是，它似乎是视频的控制栏（与播放/暂停和音量控制的一个）比实际的视频帧宽得多，这看起来相当尴尬，所以我想知道我如何能使控制栏和视频帧同样宽。我认为几个屏幕截图将提供一个更清晰的问题，我有。

我为混乱的代码道歉，但如果有帮助的话，我已经包含了它。

<!DOCTYPE html>

<html style="height:100%; width=1200px;margin:0;padding:0;">

<body style="height:100%;width=100%;margin:0;padding:0;">
<div id="container" style="background-color:#FFA500;height:100%;width:100%;position:relative;min-height:800px;min-width:1000px;" >

    <div id="logo_login_pass" style="border:1px solid black; height:25%;width:94%;background-color:white;position:relative;float:right;min-height:150px;min-width:700px;">
        <div id="logo" style="border:1px solid black; height:80%; width:30%; background-color:green; position:absolute;bottom:14px;min-height:90px;min-width:340px;">
            For Logo
        </div>
        <div id="login_pass_form" style="border:1px solid black; height:40%;width:50%;background-color:blue;min-height:60px; min-width:300px;position:relative;float:right;bottom:-30px;">
            For Login and Password
        </div>
    </div>
    <div id="video" style="border:0px solid white; height:40%;width:49.844%;background-color:indigo;position:relative;float:left;">
        <video width="450px" height="190px" controls="controls" style="position:absolute;top:30px;right:170px;">
            <source src="sampleVid.mp4" type="video/mp4">
            <source src="sampleVid.ogv" type="video/ogv">
            <source src="sampleVid.webm" type="video/webm">
            Your browser does not support the video tag.
        </video>
    </div>
    <div id="user_registration_form" style="border:0px solid white; height:74%;width:50%;background-color:purple;position:reltive;float:right;min-height:448px;">
        Registration Form
    </div>
    <div id="footer" style="border:1px solid black; height:32%;width:100%;background-color:pink;position:relative;float:right;min-height:188px;">
        Footer
    </div>
</div>

</body>

</html>

如果你能帮忙的话，我将不胜感激。

Html

来源：https://stackoverflow.com/questions/13335228/control-bar-wider-than-video-in-html5-css

5条答案

按热度按时间

gjmwrych1#

设置宽度尺寸并将高度尺寸留空将解决此问题。这是因为如果您设置了两个维度，而实际的视频维度不相同，它将使用一个维度缩放到最接近的适当比例，从而在视频播放器的唯一一个维度上留下空白边距。视频可以在水平方向居中，也可以在垂直方向居中，两边都有空白

赞(0）回复(0）举报 2023-09-28

cwtwac6a2#

这是你的视频问题，因为你的视频不是全屏的。请参见以下示例

<!DOCTYPE html>

<html style="height:100%; width=1200px;margin:0;padding:0;">

<body style="height:100%;width=100%;margin:0;padding:0;">
<div id="container" style="background-color:#FFA500;height:100%;width:100%;position:relative;min-height:800px;min-width:1000px;" >

    <div id="logo_login_pass" style="border:1px solid black; height:25%;width:94%;background-color:white;position:relative;float:right;min-height:150px;min-width:700px;">
        <div id="logo" style="border:1px solid black; height:80%; width:30%; background-color:green; position:absolute;bottom:14px;min-height:90px;min-width:340px;">
            For Logo
        </div>
        <div id="login_pass_form" style="border:1px solid black; height:40%;width:50%;background-color:blue;min-height:60px; min-width:300px;position:relative;float:right;bottom:-30px;">
            For Login and Password
        </div>
    </div>
    <div id="video" style="border:0px solid white; height:40%;width:49.844%;background-color:indigo;position:relative;float:left;">
        <video width="450px"  controls="controls" style="position:absolute;top:30px;right:170px;">
              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
              <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>

            Your browser does not support the video tag.
        </video>
    </div>
    <div id="user_registration_form" style="border:0px solid white; height:74%;width:50%;background-color:purple;position:reltive;float:right;min-height:448px;">
        Registration Form
    </div>
    <div id="footer" style="border:1px solid black; height:32%;width:100%;background-color:pink;position:relative;float:right;min-height:188px;">
        Footer
    </div>
</div>

</body>

赞(0）回复(0）举报 2023-09-28

h7appiyu3#

只需添加视频中的元素大小为您想要的大小

<video width="450" height="240" controls>

赞(0）回复(0）举报 2023-09-28

0qx6xfy64#

解决方案-调整您的视频高度和宽度使用HTML，使酒吧适合视频宽高比由您。然后在网站上移动您的视频使用位置相对属性移动左右下顶部与CSS

赞(0）回复(0）举报 2023-09-28

zz2j4svz5#

取出width属性并放入max-width属性，如下所示：

<video height="190px" controls="controls" style="position:absolute;top:30px;right:170px;max-width:450px;">

使用前：

后：

赞(0）回复(0）举报 2023-09-28

我来回答

在html5 + css中控制栏比视频宽

5条答案

相关问题

热门标签

最新问答