html 视频标签内容不适合容器答案

【问题标题】：html video tag content not getting fit with the containerhtml 视频标签内容不适合容器
【发布时间】：2017-04-13 06:22:36
【问题描述】：

我正在使用 Web 应用程序，其中有如下部分

    <div class="container">
      <video id="video" autoplay>
       <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
      </video>
    </div>

视频的原始尺寸为 640*360。我想将此视频放入大小为 350*180 的容器中。

我通过为视频元素设置高度 180 来调整高度。但宽度也按比例变化，小于我的容器大小。

这是我迄今为止尝试过的http://jsfiddle.net/h9EVQ/911/

我需要调整视频的宽度，使其适合容器内。

任何帮助表示赞赏。谢谢

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

在 css 中试试这个，对我来说它是有效的：

video{
  position: fixed;
  width:350px !important;
  height: atuo !important;
  margin: 0;

}
.container{
  position:fixed;
    margin:0;
  width:350px;
  height:180px;
  background:red;
}

【讨论】：

@Marek Cieślar 感谢您的努力。

【解决方案2】：

试试这个方法：http://jsfiddle.net/h9EVQ/921/

video{
  width: 100%;
}

.container{
  width:350px;
  height:180px;
  background:red;

}

【讨论】：

感谢您的宝贵时间:) 但这不适用于 windows edge 浏览器或 IE。
看起来更好，但视频的高度增加到了 196 像素，超出了容器。
我认为我们应该做一些缩放来完成这项工作。

【解决方案3】：

请在jsfiddle找到答案。

html

<div class="container">
<video id="video" autoplay width="350" height="180">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>

css

video{
  height:180px;    
}

.container{
  width:350px;
  height:180px;
  background:red;
}

【讨论】：

你有没有注意到视频标签的两边都有空间。它不完全适合。