全屏视频 - 不显示全屏答案

【问题标题】：Fullscreen Video - not displaying fullscreen全屏视频 - 不显示全屏
【发布时间】：2016-03-26 14:14:14
【问题描述】：

我正在尝试将全屏视频添加到网站，但无法让它覆盖整个屏幕。

最初，我尝试使用 video 标签，但这在 android 上无法正常工作。现在我正在尝试 iframe，我使用的 CSS 是：

iframe {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

无论如何，视频上方/下方总是有额外的退格键。

无论如何我可以让视频填满整个屏幕，很高兴从侧面松开一些。

测试地址为here.

【问题讨论】：

当视频的纵横比（在本例中为 2.35:1）与屏幕的纵横比不匹配时，您应该会看到黑条。您可以拉伸视频，但质量不会是最好的。

标签： css html video iframe html5-video

【解决方案1】：

将width: 1920px; 和height: 816px; 添加到您的代码中即可！

iframe {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 816px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); 
}

或者，这可能是没有iframe 的解决方案的起点。

html,
body {
  margin: 0;
  padding: 0;
}	

video {
  object-fit: cover;
  width:100%;
  min-height:100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <video width="1920" height="816" preload="auto" autoplay loop>
      <source src="http://dev.charlyanderson.co.uk/OnePointEight/wp-content/uploads/2016/03/BLKLOGO.m4v" type="video/mp4">
    </video>
  </body>
</html>

【讨论】：

【解决方案2】：

我实际上找到了这个链接，它提供的代码可以解决问题！ http://fvsch.com/code/video-background/

#video-bg {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

#video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 1. No object-fit support: */

@media (min-aspect-ratio: 16/9) {
   #video-bg > video { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
   #video-bg > video { width: 300%; left: -100%; }
}

/* 2. If supporting object-fit, overriding (1): */

@supports (object-fit: cover) {
   #video-bg > video {
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
   }
}

【讨论】：