更改全屏html5视频的尺寸

Question

有没有办法修改视频的全屏功能在浏览器中的行为方式？我想在屏幕左侧显示视频，在右侧显示图像（实际上是PDF）。

我用chrome中的css尝试过它：

video:-webkit-full-screen

这给了我一些结果，但不是理想的结果。我应该为此创建自定义操作吗？如果是这样，我怎样才能让视频脱离浏览器的边界？

Answer 1

您应该将<video>标记插入<div>内，其中定义的height和width具有以下属性：

.video-container {
   position: relative;
   height: auto;
   width: 60%;
}

video {
   width: 100%; 
   max-width: 500px; // Or whatever value on your choice
   height: auto;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

如果width为100％，则视频会填满整个浏览器空间，但可以通过为分辨率和响应性设置max-width或max-height来限制视频的大小。我希望我的回答可以帮到你！

修改

要在div内正确放入，您必须将容器position: relative和position: absolute分配给视频本身。如果您想突破边界，则必须调整视频max-height和max-width的尺寸。

检查此question，因为它与您的相似。