Question

我正在尝试这样做： IMG

这是代码：

  <div class="container" id="containervideo">
  <div id="video">
        <div class="box iframe-box">
         <div class="container">
          <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>
      </div>

  </div>

CSS：

#containervideo {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 2px;
    top: 936px;
    z-index: -1000;
    overflow: hidden;
    }
    #video { 

min-height: 100%;
    //min-width:100%; - if fit to width
position:absolute;
bottom:0px;
left:0;
    }

视频总是以屏幕为中心，从不填充双方。有人可以帮帮我吗？ :(

Answer 1

删除iframe上设置的width和height属性。您可以添加一个CSS规则，将iframe的位置设置为绝对，如下所示：

＆＃13;

.iframe-box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

＆＃13;

<div class="box iframe-box">
   <iframe src="http://player.vimeo.com/video/67794477?title=0&amp;byline=0&amp;portrait=0&amp;color=0fb0d4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

＆＃13;

Answer 2

让它填满屏幕只需添加

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

如何用视频填充屏幕？

2 个答案: