Html 全宽vimeo包装背景

我试图创建一个全宽的iframe vimeo背景，背景由位于我身体部分的图案覆盖。视频被覆盖，因此变得不可点击。我试着给视频100%的宽度和高度，但没有运气覆盖屏幕。。我正在尝试以500x250像素的速度弹出视频

Html

---

您需要设置iframe及其包装的宽度和高度。我还添加了一些z-索引以增加运气

嘿，骗子骗子，这是一把小提琴：

---

此解决方案在完整css中使用iframe而不是图像复制css属性

background size:cover

首先，将vimeo iframe放入包装器中：

<div class="iframe-wrapper">
  <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>

---

此外，在Vimeo的情况下，一个专业帐户可以让你移除玩家的控制。

很荣幸能在vh/vw视口维度上提示我。在我记起这些之前我一直在犹豫！谢谢这个解决方案最适合我。为了使其适合容器，我在

上使用了
位置：绝对
。在
iframe包装上使用了
最小高度：100%
。如果您使用
min height:100vh
且窗口比容器短，则如果该布局类型对您很重要，它将无法填充其容器的高度。谢谢！我今天找了好几个小时了！这应该被标记为可接受的解决方案，只要纵横比为16:9，就可以调整大小。非常感谢！这也为我解决了这个问题。我对“Hey diddle diddle”的评论投了赞成票。
.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.video .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/overlay-pattern.png) repeat;
}

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video iframe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.video .overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    background: url(../img/overlay-pattern.png) repeat;
}

<div class="iframe-wrapper">
  <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>

/* Makes a fixed background wrapper
which the user cannot interact with */

.iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/

.iframe-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}