2016-02-05 80 views
0

我希望视频标签粘贴到顶部(或视频标签上方元素的底部)。当使用当前代码调整窗口大小时,视频元素也会从顶部(或HTML中层次结构中的元素底部)移除。有没有办法阻止视频从顶端松动?我认为这是因为视频标签试图保持它的比例,可能与宽度有关:100%。视频标签粘贴问题

我做了一个JSFiddle here这里是我的代码:

HTML:

<div class="background-video"> 
    <video autoplay loop muted> 
    <source src="somevideo.mp4" type="video/mp4"> 
    </video> 
</div> 

CSS:

.background-video 
{ 
    position: relative; 
} 

.background-video video 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    margin: 0 auto; 
    height: 1080px; 
    width: 100%; 
} 

那么,如何让这个视频标签不以不愉快的方式调整大小并仍然正确填充空间?

+0

你必须设置高度为1080px,但宽度为100% 。所以高度总是保持不变,但宽度会缩放。你有没有尝试过使用'height:auto' – JamieC

+0

也,你的小提琴不工作,因为你需要链接到一个实际的视频 – JamieC

+0

是的,但它不是关于视频本身,只是视频标签,它被称为“填写任何视频源你想要“的情况。 – Barrosy

回答

0

您必须添加到您CSS这条线的视频,图像,iframe的响应元素等

CSS

audio, iframe, img, video { 
max-width: 100%; 
}