Question

我正在尝试在我的网站背景中添加视频。我想这样做，没有任何JavaScript来优化加载时间。到目前为止，我使用了这段代码： HTML：

        <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/video-poster.jpg" > 
          <img src="img/video-poster.jpg" alt=""/>
          <source type="video/mp4" src="video/video.mp4"/>
          <source type="video/ogg" src="video/video.ogv"/>
       </video>

CSS：

  #video_background { 
      position: absolute;
      bottom: 0px; 
      right: 0px; 
      min-width: 100%; 
      min-height: 100%; 
      width: auto; 
      height: auto; 
      z-index: -1000; 
      overflow: hidden
    }

问题是我的视频有全景格式（16/9），顶部和底部有黑色边距。显然我不希望它们出现在屏幕上。因此，使用此代码，黑色边距将显示在页面底部。

如何确保黑色边距被裁剪并仍然具有响应显示？

由于

Answer 1

可能有更好的选择，但我发现这是我眼中的优雅解决方案。

我为视频#video-background提供了一个scale(1.09)，可以轻微缩放视频以移除边框。

我还将其添加到html和body以禁用视频。这是可选的，但没有它的底部边框。

html, body {
   height: 100%;
   width: 100%;
   position: fixed;
   margin: 0;
   padding: 0;
}

视频的css，

#video-background { 
   position: absolute;
   top: 0px; 
   right: 0px; 
   min-width: 100%; 
   min-height: 100%; 
   width: auto; 
   height: auto; 
   z-index: -1000; 
   overflow: hidden;
   transform: scale(1.09);
   -webkit-transform: scale(1.09);
   -moz-transform: scale(1.09);
   -o-transform: scale(1.09);
}

最后，这里是JSFIDDLE来展示它的外观。在网址中，移除/show以查看代码。

HTML5中的整页裁剪视频 - 没有jquery

1 个答案: