-1

我正在尝试在我的网站背景中添加视频。我想在没有任何 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），顶部和底部都有黑色边距。显然我不希望它们出现在屏幕上。因此，使用此代码，黑色边距出现在页面底部。

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

谢谢

4

1 回答 1

-1

那里可能有更好的选择，但我发现这在我看来是一个优雅的解决方案。

我给了视频#video-backgrounda scale(1.09)，它会稍微放大视频以去除边框。

我还将它添加到htmlandbody以禁止视频被隐藏。这是可选的，但没有它您将拥有底部边框。

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以查看代码。

于 2013-11-15T14:41:21.197 回答