CSS-避免视频1：1中出现黑色区域​​

Question

我有一个方形视频（比例为1：1），我想将其放置在屏幕中间。

我的第一个也是最大的问题是，玩家在标签<video>的两侧都插入了两个黑色区域。我该如何避免这种事情？

<div style="width: 400px; height: 400px; background-color: red;">
        <video>
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

包含它的div是平方的（400px x 400px），为什么视频不能填充它？ 我也尝试使用VideoJS，但是并不能解决我的问题。

Secondo问题。 例如，如果我尝试在屏幕中间移动div，例如：

position: absolute; /*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
overflow: auto;

首先，div出现在屏幕中间，但立即消失。

您能帮我解决这个问题吗？ 预先谢谢你。

Answer 1

我建议在video标签内设置视频的高度和宽度：

<div style="background-color: red;">
    <video width="400" height="400">
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

我认为这将迫使它保持方形。

要使您的div居中，必须感到困惑。您给它指定了特定的宽度/高度，但同时还希望div的边界触及屏幕的所有角。尝试这样的操作（并删除您给它的css（左，右，顶部等）：

div{
    display:inline-block; /*this will keep the div the size of it's contents*/
    margin:auto; /*this should give it equal margins on all sides, thus centering*/
}