视频100％宽度和高度220px

Question

我有一个视频，我希望它能够完全100％的宽度和220px的高度

<video  controls="controls">
   <source src="video/sport.m4v" type="video/mp4" />
   <source src="video/sport.ogg" type="video/ogg" />
   <source src="video/sport.flv" type="video/flv" />

但是我将高度更改为220px时的问题也是宽度变化

video {
 width: 100% !important;
 height:220px !important;
}

Answer 1

如果你的字面宽度为100％，高度为220px，那么你的视频可能看起来非常拉伸，水平。更好的想法是将视频包含在容器div中，该容器包含具有所需尺寸的溢出隐藏集。例如：

<div id="container">
  <video  controls="controls">
    <source src="video/sport.m4v" type="video/mp4" />
    <source src="video/sport.ogg" type="video/ogg" />
    <source src="video/sport.flv" type="video/flv" />
</div>

video{
  width: 100%;
}
#container{
  width: 100%;
  height: 220px;
  overflow: hidden;
}

这样，视频将具有正常的宽高比，但具有正确的宽度。然后，包含div只隐藏视频的任何部分高度超过220px。