jQuery 没有黑边的全屏视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16984326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullscreen video without black borders
提问by codek
The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size.
我遇到的问题是视频总是在侧面或顶部/底部出现黑条，具体取决于屏幕尺寸。
Any idea how to get it full screen always without showing that annoying black bars?and without using a plugin.
知道如何在不显示烦人的黑条的情况下始终全屏显示吗？并且不使用插件。
This is my markup:
这是我的标记：
<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%;
}
}
}
采纳答案by Paul S.
Try adding to your CSS
尝试添加到您的 CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100%will let the element will expand as much as it can, until it hits a maximum height or width of 720pxor 1280px, respectively.
这意味着，width: 100%; height: 100%将让元件将膨胀，也同样可以，直到它碰到的最大高度或宽度720px或1280px分别。
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
如果您正在查看它的屏幕具有更高的分辨率，则该节点将停止扩展并且您不会有黑色边框。
Further, afaik the following is not valid CSS, are you using a library or something?
此外，afaik 以下不是有效的 CSS，您使用的是库还是其他东西？
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted:I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
接受答案后编辑：我只是想到了一种完全不同的方法来实现这一点，但这需要您更改很多 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;
}
回答by GusRuss89
If you know the aspect ratio of your video, you shouldn't even need Javascript. You can use a percentage-based padding-top.
如果您知道视频的纵横比，您甚至不需要 Javascript。您可以使用基于百分比的padding-top.
I could post code, but I'd recommend you read this entire articleanyway.
我可以发布代码，但我还是建议您阅读整篇文章。
回答by jimiayler
@Paul S. 's answer works for me for the .fittoboxcontainer for 16:9 video aspect ratios but the .fittobox > iframeembed still has black bars with his CSS. Removing the right and bottom positioning fixes it for me (no need for "px" in those 0 values, of course):
@Paul S. 的答案适用于.fittobox16:9 视频纵横比的容器，但.fittobox > iframe嵌入的 CSS 仍然有黑条。删除右侧和底部定位为我修复了它（当然，在那些 0 值中不需要“px”）：
.fittobox > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
