Css 使用背景尺寸封套时，将视频固定到背景位置

我正在做一个项目，我需要在背景图像的特定部分放置一个视频剪辑（视频应该始终位于手机屏幕的顶部）。背景响应迅速且不断变化。如何确保包含视频的视频始终保持在相同的相对位置

CSS:

}

HTML:

---

首先，您的css有点多余

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

.overlay{
位置：固定；/*级联式解决方案
在纯CSS中有一种方法可以实现这一点，但与往常一样，它也有一些警告：

它依赖于。这些都是相对较新的，所以对它们的支持并不完美，但是。对CSS3来说是的

为了使其正常工作，必须根据视口调整目标图像的大小，或者至少调整与视口相关的大小

它依赖于媒体查询，但同样，许多支持移动的互联网也是如此

它可能需要稍微调整一下，才能让视频精确到你想要的位置。但到目前为止，我测试过的所有现代产品都可以使用它



解释
需要意识到的关键点是，当“覆盖”图像时，浏览器会在两种缩放图像的方式之间切换。当视口宽度超过高度的某个比例时，会发生这种切换。该比例取决于您使用的图像的纵横比

我想说的是，我现在已经足够清醒，能够计算出
@媒体中使用的值（最小宽度：178vh）
但是如果我诚实的话，我试过并弄错了它。只需知道，取图像的原始尺寸3264 x 1836，然后计算一个比率，
3264/1836=1.7777777 8
会给你留下一个特定的数字。因为
vh
和
vw
是视口尺寸的1/100，你应该乘以这个数字100，四舍五入时得到
178
。这是切换点。显然，如果更改原始图像的尺寸，则需要重新计算并更新媒体查询的选择器

除此之外，这只是一个简单的例子，计算出你的视频在
vh
和
vw
方面占据了多大比例的视口。同样，这是一次尝试和错误，但在我看来，啤酒似乎增加了我使用这种方法的可能性……不知道为什么



分支
啊，在进一步测试之后，webkit似乎不喜欢媒体查询中的
vh
，或者至少它似乎不适用。我必须调查原因。很可能它在
max width
中不支持这一点，这是一个遗憾。使用
vmin
和vmax

过了一段时间

是的。Webkit再一次让人失望。对不起，向一个非常好的浏览器致敬……我似乎总是可以依靠Firefox来做正确的事情，Webkit，不是那么多。不幸的是，如果浏览器在特定环境下不理解

vh

和

vw

，除了回到scr之外，没有什么可以做的了令人恼火的是，Webkit确实了解其他上下文中的视口长度，所以他们已经实现了处理这些值的代码，只是不用于媒体查询——据我所知

不过有一个小小的修正，它涉及到在媒体查询中使用

方向

。这并不完美，因为当视口是近似正方形时，它会失败。它肯定会减少失败的不同比率的数量。不过，我已经更新了下面的代码

混合物 最后，如果我实现了这一点（目前的浏览器都是如此）。我会使用CSS版本，然后使用JavaScript对媒体查询中不支持视口指标的浏览器进行增强。您可以使用

window.matchMedia

或类似的库从头开始执行

我已经用JavaScript回退更新了以下内容，应该注意这应该得到改进…很可能是使用现有库使用跨浏览器方法来应用事件侦听器和添加和删除类名。当前代码将覆盖HTML标记上设置的任何类名，所以要小心

///感谢http://stackoverflow.com/questions/3437786/#answer-11744120
var viewportDimensions=函数（）{
var w=窗口，
d=文件，
e=d.documentElement，
g=d.getElementsByTagName（'body'）[0]；
返回{
w:w.innerWidth | e.clientWidth | g.clientWidth，
h:w.innerHeight | | | e.clientHeight | | | g.clientHeight
};
};
window.matchMedia&（函数（）{
var测试=窗口匹配媒体（屏幕和（最小宽度：0vh）），f；
///这只会在不支持vh媒体查询的浏览器上失败
如果（！test.matches）{
///留心
addEventListener（'resize'，（f=函数（e））{
///获取视口尺寸
var vpd=viewportDimensions（）；
///运行基于js的测试，与媒体查询相同
如果（vpd.w>（1.78*vpd.h））{
document.documentElement.className='min-width-178vh'；
}
否则{
document.documentElement.className='max-width-178vh'；
}
}));
///第一轮！
f（）；
}
})（）；

/*将坐标移到中心，因为
这是使用时唯一固定的坐标
图像上的“封面”*/
.层{
位置：绝对位置；
左：50%；
最高：50%；
宽度：1px；
高度：1px；
}
/*默认情况下，我们的值基于视口高度
这就是“掩护”所做的，至少在
图像将拉伸到视口*/
.视频{
位置：绝对位置；
宽度：25.5vh；
左：-50.5vh；
顶部：-22.8vh；
背景：#F00；
}
/*webkit修复了一半，似乎webkit没有
 <!-- 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>

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