我遇到的问题是视频总是在两侧或顶部/底部出现黑条,具体取决于屏幕尺寸。
知道如何让它始终全屏显示而不显示烦人的黑条吗?并且不使用插件。
这是我的标记:
<div id="full-bg">
<div class="box iframe-box" width="1280" height="800">
<iframe src="http://player.vimeo.com/video/67794477?title=0&byline=0&portrait=0&color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
#full-bg{
width: 100%;
height: 100%;
img{
display: none;
}
.iframe-box{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/fittobox.png);
left: 0 !important;
top: 0 !important;
iframe{
width: 100%;
height: 100%;
}
}
}
最佳答案
尝试添加到您的 CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
这意味着 width: 100%; height: 100%
将让元素尽可能地扩展,直到它分别达到 720px
或 1280px
的最大高度或宽度。
如果您正在查看的屏幕具有更高的分辨率,节点将停止扩展并且您不会有黑色边框。
此外,afaik 以下不是有效的 CSS,您使用的是库还是其他东西?
#full-bg {
.iframe-box {
foo: bar;
}
}
接受答案后编辑:我只是想到了一种完全不同的方法来实现这一点,但这需要您更改很多 CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
关于javascript - 全屏视频无黑边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16984326/