html视频标记内容不适合容器

时间:2017-04-13 06:22:37

标签: javascript html html5-video

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

library(zoo)
setDT(df)[, c('wanted', 'count') := list(rleid(na.locf(y)),  uniqueN(y, na.rm = TRUE)), x]
df
#   x  y wanted count
#1: a  1      1     2
#2: a  2      2     2
#3: a NA      2     2
#4: b  3      1     1
#5: b  3      1     1
#6: b  3      1     1
#7: c  2      1     2
#8: c  1      2     2
#9: d  5      1     1

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

我通过给视频元素提供高度180来调整高度。但宽度也按比例改变,小于我的容器尺寸。

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

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

任何帮助表示赞赏。 谢谢

3 个答案:

答案 0 :(得分:0)

在css中尝试这个,对我而言,它正在发挥作用:

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

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

答案 1 :(得分:0)

尝试这种方式:http://jsfiddle.net/h9EVQ/921/

video{
  width: 100%;
}

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

}

答案 2 :(得分:0)

请在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;
}