全屏自适应视频

时间:2014-06-25 13:27:45

标签: css css3

尝试制作全屏自适应视频。

<video id='myVideo' autoplay>
    <source src='http://beardhouse.com.ua/wp-content/themes/beardhouse/sources/video/video-bg.mp4' type='video/mp4'>
    <source src='http://beardhouse.com.ua/wp-content/themes/beardhouse/sources/video/video-bg.ogg' type='video/webm'/>
</video>

#myVideo{
  position: fixed;
  bottom: 0px;
  right: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}

Here我现在所拥有的,它需要窗口的所有空间,但它不适应。

如何解决?

1 个答案:

答案 0 :(得分:1)

'适应性'是什么意思?你想要还是不想保持规模?

这里

http://jsfiddle.net/udkt4/1/

我保持比例/比例并使其可以按宽度调整

#myVideo{
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: auto;
}