在窗口中最大化HTML5视频，不会出现任何溢出

Question

我正在开发Plex的开源替代品，我试图让浏览器内的视频播放器在播放过程中占据尽可能多的窗口，但我还是遇到一些问题。如果您只是访问其中的视频网址，那么Chrome内置的视频播放器正是我想要做的，Netflix网站也是如此。但是，我一直无法在我的网站上很好地播放。

我现在有了以下代码（JSF与PrimeFaces）：

＆＃13;

＆＃13;

			div.video-container {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				text-align: center;
			}
			.expanded-video {
				padding: 0;
				margin: 0 auto;
				max-width: 100%;
				max-height: 100%;
			}

＆＃13;

		<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;">
			<p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container">
				<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}"
					width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" >
				</video>

				<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
			</p:panel>
		</div>

＆＃13;

＆＃13;

＆＃13;

问题是我可以让它水平或垂直填充窗口，但是如果我调整窗口大小，那么视频会超出屏幕边缘。例如：

底部被切断：

相同的视频，窗口调整大小（此行为是正确的）：

如果我访问mp4文件的网址，Chrome会做什么（完全合适，没有切断）：

我知道我可以使用javascript接收窗口大小调整事件并设置高度和宽度，但是我正在寻找一个纯HTML + CSS解决方案来解决这个问题让我将div保持在顶部显示电影的标题。 （项目已经有Twitter Bootstrap）

修改

一旦它被JSF呈现，dom看起来像这样：

＆＃13;

＆＃13;

<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content">
				<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video">
				</video>

				</div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

同样值得注意的是，我们并未尝试支持Internet Explorer或Edge，而且，虽然我们想支持Safari，但如果我们能够支持Safari，我们就可以了＃39 ;吨

Answer 1

将max-width和max-height更改为'width'和'height'为我排序。

你基本上告诉视频它可以是任何大小，只要它不超过100％;

.expanded-video {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
 }

嗯，可能听错了，因为视频在工作时被阻止，我无法测试我的解决方案

Answer 2

你也可以使用这个css技巧根据宽度调整视频比例;

.cover { 
   min-width: 100%; max-width: 100%; object-fit: cover;
}

Detailed Info Here