使用全屏 API 制作视频全屏答案

【问题标题】：making a video full screen using full screen API使用全屏 API 制作视频全屏
【发布时间】：2018-12-01 14:39:48
【问题描述】：

我在 div 中有一个视频

当我使用此代码展开视频时

 if (video.requestFullScreen) {
      video.requestFullScreen();
 } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
 } else if (video.webkitRequestFullScreen) {
      video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
 }

视频会扩展到浏览器的宽度和高度，而不是将整个 chrome 窗口扩展到全屏大小。

更新：这只发生在我的浏览器上！代码没有问题

【问题讨论】：

你不能在你的视频元素上使用controls吗？那总是有一个全屏切换
我正在使用我自己的控件当我按下全屏 btn 时，它会像这样（如图所示），其中包含 html5 控件。
我建议使用 github.com/sindresorhus/screenfull.js，这似乎是一个不错的 polyfill。
我试过这个完全一样的事情。到视频元素
你的屏幕截图仍然显示浏览器的窗口，这让我感到奇怪。对于您的父母，您应该将其包装在另一个容器中，您将在该容器上设置 400*300 样式，并将其设置为 100%：codepen.io/anon/pen/xVQKGy

标签： javascript css google-chrome fullscreen

【解决方案1】：

使用vh 和vw。

video {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

1vh 是总端口视图高度的 1%，1vw 是总端口视图宽度的 1%。默认情况下，html 和 body 标签只占据内容的高度，而不是整个屏幕。同样，一个页面内容超过一个屏幕的内容将比 100vh 多 100% 的空间。

position: fixed; 以确保它位于角落中其余内容的上方，并且非常适合。

编辑：将“绝对”更改为“固定”，以便它可以正确地适合长页面或宽页面。 fixed 是相对于浏览器的，而absolute 是相对于父容器的。

编辑 2：您已将问题更改为询问如何制作视频全屏，而不是全页。答案随之改变。

这是完成此操作的指南；请注意，它使用 JS 并需要用户批准该操作。您不能劫持用户的浏览器。
http://www.sitepoint.com/use-html5-full-screen-api/

【讨论】：

@Waqas 您的原始问题与您想要的不同。查看编辑 2，我提供了一份您可能会觉得有用的指南。