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中实现这一点，但是 - 像往常一样 - 它确实带来了一些警告：

它依赖于vh and vw units。这些是相对较新的，因此对它们的支持并不完美，但是it isn't that bad either。是的CSS3！
为了使其正常工作，您的目标图像必须根据视口调整大小，或至少与视口相关的内容。
它依赖于媒体查询，但是再一次，支持移动设备的互联网也是如此。

可能需要稍微调整一下才能将视频准确地送到您想要的位置。但它已经在我迄今为止测试过的所有现代产品中都有效。

Explanification

要实现的关键点是，当“覆盖”图像时，浏览器会在两种缩放图像的方式之间切换。当视口宽度超过高度的某个比例时，会发生此切换。该比例取决于您正在使用的图像的宽高比。

我想说我现在已经足够清醒，实际上已经计算了@media (min-width: 178vh)中使用的值，但如果我是诚实的，我就会试验并误导它。只要知道将图像的原始尺寸设为3264 x 1836，并计算出该比率，3264 / 1836 = 1.7777777778就会留下一定的数字。由于vh和vw是视口尺寸的1/100，因此您应该将此数字乘以100，并在舍入时得到178。这是切换点。显然，如果您更改原始图像的尺寸，则需要重新计算并更新媒体查询的选择器。

除此之外，根据vh和vw确定视频占据视口的比例的简单情况。再次，这是试验和错误，但在我的辩护啤酒似乎增加了我将使用该方法的可能性...不知道为什么。

分枝

好吧，经过一些进一步的测试后，似乎webkit不喜欢媒体查询中的vh - 或者至少它似乎没有应用。我将不得不调查为什么。它可能只是在max-width中不支持这是一种耻辱。但是，使用vmin和vmax可能会有一个解决方案。

一段时间后。

是的。 Webkit让我们再次失败了。对不起，这是一个非常好的浏览器的帽子...它似乎我总是可以依靠Firefox来做正确的事情，Webkit，而不是那么多。不幸的是，如果浏览器在特定上下文中不理解vh和vw，除了回退到脚本之外，没有太多可以做的事情。恼人的Webkit确实理解其他上下文中的视口长度，所以他们已经实现了代码来处理这些值，而不是媒体查询 - 据我所知。

虽然有一些细微的修复，但它涉及在媒体查询中使用orientation。这并不完美，因为当视口是近似正方形的任何东西时它会失败。然而，它肯定会减少它将失败的不同比率的数量。我已经更新了以下代码。

Concollusions

最后，如果我实现这一点（正如浏览器目前所示）。我使用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-index值（如z-index: -100）以将其取回。< / p>

使用背景大小的封面时，将视频固定到背景位置

2 个答案:

层叠式解决方案

Explanification

分枝

Concollusions