具有固定高度的 HTML5 视频，但将宽度缩放到 100%答案

【问题标题】：HTML5 video with fixed height, but scale width to 100%具有固定高度的 HTML5 视频，但将宽度缩放到 100%
【发布时间】：2014-12-15 20:29:21
【问题描述】：

我想做的是让 HTML5 视频缩放 100% 的页面宽度，但保持 650 像素的固定高度。

以下代码可缩放以保持纵横比，这不是我需要的：

<header>
    <video width="100%" autoplay="autoplay">
        <source src="video.webm" type="video/webm; codecs=vp8,vorbis">
    </video>
</header>

我也尝试了max-height="650px"，但这只会使视频居中并在两侧留下空白。

【问题讨论】：

你不能这样做，你可能想读这个link
在 PayPal 网站上他们实现了它。[链接](paypal.com/uk/webapps/mpp/home) 标题视频似乎没有保持纵横比。这是因为他们使用了一些花哨的 JavaScript 吗？
paypal 有width: 1179px; height: auto; visibility: visible;...所以他们只是将其设置为1179px...如果您缩小浏览器窗口，它不会重新调整大小
是的，我注意到了，但是当我从 1179 像素放大到最大分辨率 (1600 像素) 时，视频将宽度缩放 100%，但保持固定高度，这让我感到困惑。

标签： css html

【解决方案1】：

paypal 所做的是根据视口放大视频。但是他们不去移动，这是一个问题。

因此，如果您想将视频从小型设备扩展到大型设备，您可以使用基本标记来放置视频：

<video width="100%" height="auto">...

这将放大您的视频。问题是当您转到一个小视口时。视频会缩小但可能太小，因此您可以定义最小高度并使用 CSS 转换来放大视频方面：

video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}

使用媒体查询，您可以定义断点并为这些屏幕缩放视频。

此外，您还可以使用一些 javascript 定义视频的焦点（如果视频的某些区域更重要）。

【讨论】：

【解决方案2】：

我通过将它包装到两个具有设定高度（即 750 像素）的容器中来实现这一点，背面可见性：隐藏；和溢出：隐藏； - 所以视频总体上变大了，但在底部被剪掉了（感谢https://codepen.io/dudleystorey/pen/knqyK & http://fasett.no/）：

.header {
	height:750px;
	overflow: hidden;
}

video {
	display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	overflow-y: hidden;
	vertical-align: top;
}

.container_video {
	-webkit-backface-visibility: hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	width: 100%;
    height: 100%;
	z-index: 1;
	position: relative;
}

<header class="header">
        <div class="container_video">
          <video preload="auto" autoplay loop muted poster="img/videobg.png" id="bgvid" src="//demosthenes.info/assets/videos/polina.mp4" ></video>
        </div>
      </header>

【讨论】：