css - 最大化窗口中的 HTML5 视频而不会溢出

Question

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

我现在有以下代码(带有 PrimeFaces 的 JSF):

			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%;
			}

		<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>

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

底部被切断:

同一视频，调整窗口大小(此行为是正确的):

如果我访问一个 mp4 文件的 url(完美匹配，没有被截断)，chrome 会做什么:

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

编辑

一旦被 JSF 渲染，dom 看起来像这样:

<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>

同样值得注意的是，我们并没有尝试支持 Internet Explorer 或 Edge，虽然我们希望支持 Safari，但如果不能，我们也没关系。

Answer 1

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

你基本上告诉视频它可以是任何尺寸，只要不超过 100%；

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

嗯，可能理解有误，我无法测试我的解决方案，因为视频在工作中被屏蔽了