javascript - 如何用视频填充屏幕？

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 的位置设置为绝对位置，如下所示:

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

<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>