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

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. 它依赖于vh和vw单位.这些都是相对较新的,所以对它们的支持并不完美,但它也不是那么糟糕.是的CSS3!

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

3. 它依赖于媒体查询,但是再一次,支持移动设备的互联网也是如此.

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

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>