文章/答案/技术大牛

发布

社区首页 >问答首页 >全屏视频-不显示全屏

问全屏视频-不显示全屏
EN

Stack Overflow用户

提问于 2016-03-26 14:14:14

回答 2查看 1.1K关注 0票数 0

我试图添加一个全屏视频到一个网站，但我有困难，它涵盖整个屏幕。

最初，我尝试使用视频标签，但这在android上无法正常工作。现在我正在尝试iframes，我使用的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是这里。

css

html

video

iframe

html5-video

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-01 10:33:38

我实际上找到了这个链接，它提供的代码实现了！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;
   }
}

票数 0

Stack Overflow用户

发布于 2016-03-26 15:39:53

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36236290

复制

相似问题

问全屏视频-不显示全屏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏视频-不显示全屏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏视频-不显示全屏
EN