HTML 5视频缩放

时间:2015-12-03 13:48:05

标签: html css

我有一个背景视频,我必须根据浏览器/设备的大小进行缩放。我现在正试图弄清楚如何让它不断地到达我的页面顶部。出于某种原因,当它向下缩小时,它会向下推动。

调整它的唯一方法是使类.landing_video的高度更小,然后将其移回顶部位置,或者我可以将#landingbg的顶部设为负值。这些是调整位置以保持在最高位置的唯一方法吗?

HTML

        <div id="landbg">
            <video loop muted autoplay class="landing_video">
                <source src="video/landingbg.mp4" type="video/mp4">
            </video>
        </div>

CSS

/*----Landing Page Styling----*/
#landbg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.landing_video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

视频在1920x1080看起来很好,当它缩小到设备比例时,它几乎看起来像一种填充形式。任何帮助将不胜感激。

这是解释问题http://jsfiddle.net/md7fqtvh/2/

的小提琴

0 个答案:

没有答案