没有黑边的全屏视频答案

【问题标题】：Fullscreen video without black borders没有黑边的全屏视频
【发布时间】：2013-06-03 18:34:30
【问题描述】：

我遇到的问题是视频总是在两侧或顶部/底部出现黑条，具体取决于屏幕尺寸。

知道如何在不显示烦人的黑条的情况下始终全屏显示吗？ 并且不使用插件。

这是我的标记：

    <div id="full-bg">
        <div class="box iframe-box" width="1280" height="800">
            <iframe src="http://player.vimeo.com/video/67794477?title=0&amp;byline=0&amp;portrait=0&amp;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%;
            }
        }
    }

【问题讨论】：

这取决于您的视频格式和大小。您可以尝试拉伸它，但您的视频可能看起来很奇怪
如果视频的纵横比与显示器的纵横比不匹配，它应该有黑条。
那是让视频以正确的纵横比显示，这是由视频软件（我猜是 Flash？）而不是 JavaScript 或 CSS 控制的。

标签： javascript jquery html css

【解决方案1】：

尝试添加到您的 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;
}

【讨论】：

Edit After Update Works 和 code can be modified easily
它正在隐藏视频控制器

【解决方案2】：

如果您知道视频的宽高比，那么您甚至不需要 Javascript。您可以使用基于百分比的padding-top。

我可以发布代码，但无论如何我建议你阅读this entire article。

【讨论】：

【解决方案3】：

@Paul S. 的答案适用于我的 .fittobox 16:9 视频纵横比容器，但 .fittobox > iframe embed 的 CSS 仍然有黑条。删除右侧和底部的定位为我修复了它（当然，在那些 0 值中不需要“px”）：

.fittobox > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：