全角 vimeo 包装背景

Posted 2023-03-05

【中文标题】全角 vimeo 包装背景

【英文标题】：Full-width vimeo wrapper background

【发布时间】：2014-02-14 08:34:18

【问题描述】：

我正在尝试创建一个全角 iframe vimeo 背景，该背景被位于我的 body div 中的图案所覆盖。视频被覆盖层覆盖，因此无法点击。我试过给视频 100% 的宽度和高度，但在覆盖屏幕时没有运气。我试图让视频以 500x250 像素弹出。

html

 <div class="video">    
    <iframe src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1"   frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
    <div class="overlay"></div> 
</div>

CSS

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

【参考方案1】：

您需要设置 iframe 及其包装器的宽度和高度。我还添加了一些 z-index 以求好运！

嘿，骗子骗子，这是一个小提琴：http://jsfiddle.net/n28Ef/1/

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

【讨论】：

我对“Hey diddle diddle”评论投了赞成票。

【参考方案2】：

此解决方案在完整的 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>

然后应用这些样式：

/* 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%);

此外，对于 Vimeo，pro 帐户使您能够删除播放器的控件。

【讨论】：

感谢提示我了解 vh/vw 视口尺寸。在我想起那些之前一直绊倒这个！谢谢！

这个解决方案最适合我。为了使它适合容器，我在.iframe-wrapper 上使用了position: absolute，在iframe 上使用了min-height: 100%。如果您使用 min-height: 100vh 并且窗口比容器短，则它不会填充其容器的高度，如果这种类型的布局对您很重要。

谢谢！我今天找了几个小时这样的东西！

这应该被标记为接受的解决方案，只要纵横比为 16:9 就可以调整大小。

非常感谢！这也为我解决了问题。