Question

我想要做的是拥有100％宽度的HTML5视频比例，但保持650px的固定高度。

以下代码进行了扩展以保持宽高比，这是不我需要的：

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

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

Answer 1

paypal所做的是根据视口扩展视频。但他们不会移动，这是一个问题。

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

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

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

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

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

另外，通过一些javascript，您还可以为视频定义焦点（如果视频的某些区域更重要）。

检查此链接以获取更多详细信息：

http://viget.com/extend/fullscreen-html5-video-with-css-transforms

Answer 2

我通过将它包装成两个具有设定高度（750px即）的容器，背面可见性：隐藏;溢出：隐藏; - 所以视频总体上变大了但是在底部裁剪掉了（感谢https://codepen.io/dudleystorey/pen/knqyK＆amp; http://fasett.no/）：

＆＃13;

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

＆＃13;

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

＆＃13;

HTML5视频，高度固定，但比例宽度为100％

2 个答案: