当使用背景大小的封面时，将视频修复到背景位置。

Question

我正在做一个项目，在这个项目中，我需要把一个视频剪辑放在背景图像的特定部分(视频应该总是在手机屏幕上)。背景是有反应的，并且不断变化。如何确保包含视频的视频始终保持在相同的相对位置？

CSS：

.main{
background-image: url("../images/moshe.jpg"); 
background-attachment:fixed;
background-position: center center;
background-size: cover;
height: auto;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
width: auto;
}
.overlay{
position:fixed;
position: absolute;
top: 30%;
left: 30%;

}

HTML：

 <!-- video -->
    <div class="embed-responsive embed-responsive-16by9 overlay">
    <video muted autoplay loop class="embed-responsive-item" width="100">
     <source src="images/time.mp4" type=video/mp4>
    </video>
    </div>

Answer 1

级联式解

有一种方法可以在纯CSS中实现这一点，但是--和往常一样--它确实附带了一些注意事项：

1. 它依赖于单位。这些都是相对较新的，因此对它们的支持并不完美，而是也没那么糟。CSS3太棒了！
2. 为了使其工作，您的目标图像必须调整到视口，或者至少是与视口相关的东西。
3. 它依赖于媒体查询，但同样，许多支持移动的互联网也是如此。

它可能需要稍加调整，才能准确地得到你想要的视频。但是到目前为止，它已经在所有现代的测试中发挥了作用。

解释化

需要认识到的关键是，当“覆盖”图像时，浏览器在缩放图像的两种方式之间切换。当视口宽度超过一定比例的高度时，就会发生此切换。这个比例取决于您正在使用的图像的高宽比。

我想说，我现在已经足够清醒了，能够计算出在@media (min-width: 178vh)中使用的值，但是如果我诚实的话，我尝试并错误了它。只要知道，取原始尺寸的图像3264x1836，并计算出一个比率，3264 / 1836 = 1.7777777778留给你一个特定的数字。因为vh和vw是视口维数的1/ 100，所以应该将这个数字乘以100，然后在四舍五入时得到178。这是开关点。显然，如果更改原始图像的维度，则需要重新计算此值并更新媒体查询的选择器。

除此之外，这只是简单的计算出视频在vh和vw中所占的比例。再次，这是试验和错误，但在我的辩护，啤酒似乎增加了我使用这种方法的可能性.不知道为什么。

分支

啊，经过进一步的测试，似乎webkit不喜欢媒体查询中的vh，或者至少它似乎不适用。我将不得不调查原因。它可能只是在max-width中不支持这一点，这是一个遗憾。然而，在使用vmin和vmax时可能有一个解决方案。

一段时间后。

是啊。Webkit又一次让它的侧面向下。抱歉，向非常好的浏览器致敬.看起来我总是可以依靠火狐来做正确的事情，Webkit，没有那么多。不幸的是，如果浏览器在特定的上下文中不理解vh和vw，那么除了返回脚本之外，没有什么可以做的。令人恼火的是，Webkit确实理解其他上下文中的视口长度，因此他们实现了处理这些值的代码，只是不用于媒体查询--据我所知。

不过，有一个小小的修正，它涉及在媒体查询中使用orientation。这并不完美，因为当视口是接近正方形的任何东西时，它都会失败。它肯定会减少不同比率的数目，但是，它将失败。我已经更新了下面的代码。

勾结

最后，如果我实现这一点(如目前的浏览器)。我会使用CSS版本，然后对不支持媒体查询中的视口度量的浏览器使用JavaScript进行增强。您可以使用window.matchMedia或库(如Enquire.js )从头开始执行此操作。

我用一个JavaScript回退更新了下面的内容，应该注意到这一点应该在.最有可能的方法是使用现有的库来使用跨浏览器的方法来应用事件侦听器以及添加和删除类名。当前代码将覆盖HTML标记上设置的任何类名，所以请注意！

​

/// with thanks to http://stackoverflow.com/questions/3437786/#answer-11744120
var viewportDimensions = function(){
  var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName('body')[0];
  return {
    w: w.innerWidth || e.clientWidth || g.clientWidth, 
    h: w.innerHeight|| e.clientHeight|| g.clientHeight
  };
};

window.matchMedia && (function(){
  var test = window.matchMedia('screen and (min-width: 0vh)'), f;
  /// this will only fail on browsers that do not support vh in media queries
  if ( !test.matches ) {
    /// listen out for resize
    window.addEventListener('resize', (f=function(e){
      /// get the viewport dimensions
      var vpd = viewportDimensions();
      /// run our js based test, same as the media query
      if ( vpd.w > (1.78 * vpd.h) ) {
        document.documentElement.className = 'min-width-178vh';
      }
      else {
        document.documentElement.className = 'max-width-178vh';
      }
    }));
    /// first run!
    f();
  }
})();

/* Shifts the coordinates to the center, because
   that is the only fixed coordinate when using
   "cover" on an image */
.layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
}

/* By default base our values on viewport height
   This is what "cover" is doing, at least when 
   your image is streched to the viewport */
.video {
    position: absolute;
    width: 25.5vh;
    left: -50.5vh;
    top: -22.8vh;
    background: #F00;
}

/* Half fix for webkit, it seems webkit does not support
   vh and vw in its media queries... why??? This will
   work as long as the viewport dimension are not squareish */
@media screen and (orientation: landscape) {
  .video {
    top: -12.75vw;
    left: -28.5vw;
    width: 14.2vw;
  }
}

/* Detect when we change scaling/cropping reaction
   and base our values on viewport width instead */
@media screen and (min-width: 178vh) {
  .video {
    top: -12.75vw;
    left: -28.5vw;
    width: 14.2vw;
  }
}

/* Repeating myself to repair the damage that the webkit
   fix does to Firefox's handling */
@media screen and (max-width: 178vh) {
  .video {
    width: 25.5vh;
    left: -50.5vh;
    top: -22.8vh;
  }
}

/* These styles override the media queries when called 
   in by the JavaScript fallback */
.min-width-178vh .video {
  top: -12.75vw !important;
  left: -28.5vw !important;
  width: 14.2vw !important;
}
.max-width-178vh .video {
  width: 25.5vh !important;
  left: -50.5vh !important;
  top: -22.8vh !important;
}

/* These styles are just for set-up. You don't need to
   split the background image out into .inner, I just
   did so to open up options whilst trialing a solution. */
.main {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.inner {
    position: absolute;
    background: url("http://www.codelamp.co.uk/so/cover-video-pos-bg.jpg") no-repeat center center / cover; 
    background-color: #000;
    width: 100%;
    height: 100%;
}

<div class="main">
    <div class="inner"></div>
    <div class="layer">
        <div class="video">
            <video width="100%"></video>
        </div>
    </div>
</div>

​

Answer 2

首先，您的css有点多余。

.overlay{
    position:fixed;       /*  <--- This line  */
    position: absolute;   /*  <--- And This line  */
    top: 30%;
    left: 30%;
}

在这里，position:absolute将在稍后放置时被考虑。

考虑到top: 30%和left: 30%正确地完成了视频元素的定位，尝试将最低的z-索引值(如z-index: -100)返回给它。