如何在同一时间设置HTML5视频的高度和宽度？

Question

这是我想要实现的效果：

但我尝试了代码：

video {height :100%; width: auto}
video {width: auto; height: 100%}

没用：

带自动宽度的图片：

带自动高度的图片：

那我怎么能这样做？谢谢！

Answer 1

查看the technique Twitter Bootstrap uses for embedding responsive media。

基本上，它们使用100％的宽度和高度的垂直填充。由于垂直填充基于元素的宽度（而不是高度），因此无论视频容器的宽度如何，这都将确保纵横比始终相同。这适用于纵横比很重要的任何媒体。

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

// Modifier class for 16:9 aspect ratio
.embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

// Modifier class for 4:3 aspect ratio
.embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%;
}

HTML

<div class="embed-responsive embed-responsive-16by9">
    <iframe src="https://www.youtube.com/embed/yv-Fk1PwVeU" />
</div>