全屏视频 - 不显示全屏

Question

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

最初，我尝试使用视频标签，但这在 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; 
}

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

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

测试 url 是 here.

Answer 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>

Answer 2

我确实找到了这个 link 并且它提供的代码可以解决问题！ 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;
   }
}

全屏视频 - 不显示全屏

Fullscreen Video - not displaying fullscreen

html

css

video

iframe

html5-video