更改全屏 html5 视频的尺寸

Question

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

我已经用 chrome 中的 css 试过了：

video:-webkit-full-screen

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

Answer 1

您应该在<div> 中插入<video> 标记，其中定义了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，因为它与您的相似。