全屏视频，无黑色边框 [英] Fullscreen video without black borders

问题描述

我遇到的问题是视频总是在两侧或顶部/底部显示黑色条，具体取决于屏幕大小。

>

b

这是我的标记：

 < div id =full-bg > 
< div class =box iframe-boxwidth =1280height =800> 
< iframe src =http://player.vimeo.com/video/67794477?title=0&ampyline\"0&amp;portrait=0&amp;color=0fb0d4width =1280 height =720frameborder =0webkitAllowFullScreen 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 * / 
} 
  

这意味着 ：100％; height：100％将允许元素尽可能扩展，直到达到 720px 或<$ c的最大高度或宽度$ c> 1280px 。

如果您正在查看的屏幕具有更高的分辨率，则节点将停止展开，

---

此外，afaik以下是无效的CSS，您使用的是库还是其他？

 ＃full-bg {
 .iframe-box {
 foo：bar; 
} 
} 
  

---

接受答案后编辑：我只是想出了一种完全不同的方式来实现这一点，但它需要您更改很多CSS

  .fittobox {/ *给出适合框长宽比* / 
 display：inline-block; / *让它的风格这样* / 
 padding：0; / *摆脱预定义* / 
 margin：0; 
 width：100％; / *占用全宽可用* / 
 padding-top：56.25％; / *给出16：9的纵横比; 720/1280 = 0.5625* / 
 height：0px; / *不希望它扩展超过填充* / 
 position：relative; / *允许子元素的绝对定位* / 
} 
 
 .fittobox> iframe {
 position：absolute; / * expand to fill * / 
 top：0px; 
 left：0px; 
 right：0px; 
 bottom：0px; 
} 
  

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&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%;
            }
        }
    }

解决方案

Try adding to your 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 720px or 1280px, respectively.

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?

#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

.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;
}

这篇关于全屏视频，无黑色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！