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; 
}

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

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

测试网址为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的解决方案的起点。

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}	

video {
  object-fit: cover;
  width:100%;
  min-height:100%;
}

＆＃13;

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

＆＃13;

Answer 2

我实际上发现了这个链接，它提供的代码就是诀窍！ http://fvsch.com/code/video-background/

     If _dGVPlan.Rows(i).Cells(j).Value.ToString = SearchTextBox.Text Then
                MsgBox("Item found")
                temp = 1
            End If

全屏视频 - 不显示全屏

2 个答案: