Chrome 中的窄视频控件被截断

Question

当尝试嵌入小于 200 像素的视频时，"full screen" 控件在 Chrome 中被截断。 Safari 和 Firefox 没有这个问题（Firefox 有，但至少你可以右键单击并通过菜单全屏播放）。有什么方法可以强制该控件出现 Chrome？这是示例 html:

<video width="200" controls>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Answer 1

在 HTML5 视频上显示哪些控件以及何时显示它们（不幸的是）由浏览器供应商解释。

如果您确实需要将视频更改为 "full screen" 的按钮，可以使用 Full Screen API 通过 JavaScript 实现。从那里引用，按钮所要做的就是调用以下函数（添加一些样板来关心浏览器支持）。

document.getElementById("myvideo").requestFullscreen();

如果您需要将此按钮作为视频的叠加层，您可以删除本机控件（在视频元素上调用 removeAttribute("controls");）并将其替换为自定义控件，如 [=13] 中所示=].

交互式代码示例在 Codepen。

Controls cut off for narrow videos in Chrome