use*_*451 12 html css css3 responsive-design
我想要一个视频标签来填充100%的div:
a)它不需要保持比率(否则我们需要使用overflow:none);
b)填写div,而不是整个背景;
c)负责是一件好事.现在只要你对角重新调整窗口大小就行了.保持高度和水平重新调整尺寸会削减视频.
我已经尝试了几十个,甚至几百个替代品,并且所有这些都保持了初始视频比例.
它适用于fidlle ....可能是因为屏幕很小,可能是因为小提琴是一个更好的浏览器......
<body>
<div class="wrapper">
<div class="header">
.....
</div>
<div class="out-video">
<video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
<source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
<source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
</video>
</div>
</div>
该网站在这里但是当我尝试解决方案时,它会改变......左右侧边栏是空的.我希望视频能够填满整个宽度.当它覆盖div时,高度变化和视频不会完整显示.我想像背景大小100%100%,将图像拉伸到div的末尾,但它不适用于视频.
感谢您提前提出任何建议.
PS.似乎android系列不播放视频!
升
alo*_*ica 11
你可以使用像这样的解决方案.比率不会改变,但你可能会丢失正确的视频部分.
video#bgvid {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
该视频将固定在左上角.如果你想改进它,我想你需要一些JavaScript.
编辑:
只需找到一个可以满足您需求的JQuery解决方案:模拟背景大小:覆盖<video>或<img>