HTML 内联视频全屏

Question

似乎无法实现我想要的功能，所以请教专家。

我想实现这个经典的例子： http://codepen.io/anon/pen/rWwaRE

但是把它放在文本块之间，并且（如果可能的话）当你像这个页面一样滚动它时开始（向下滚动看看我的意思）： http://www.abc.net.au/news/2016-11-14/four-corners-broken-homes-child-protection/7987450

如果我只是按照 Polina 的示例进行操作，我可以将视频全屏显示，但当我尝试将它放在其他文本块之间的 a 或页面上时则不行。它总是只是恢复到盒子中或视频的实际大小。

我想尽可能保持简单 - 所以尽可能 CSSS 而不是 Javascript。另外，如果视频没有自动启动也没关系，但只要它是全屏即可。

这是我的：

HTML:

<!-- A large block of text -->
<section id="#" class="intro">
  <div class="intro-body">
    <div class="container">
        <h1>TEXT </h1>
        <h4>MORE TEXT</h4>    
    </div>
  </div>
</section>


<!--This bit needs to be full screen etc -->
<section>
    <video controls id="BG">
        <source src="video/MAIN.mp4" type="video/mp4">
    </video>
</section>

<!-- Another large block of text -->
<section id="#" class="intro">
  <div class="intro-body">
    <div class="container">
        <h1>TEXT </h1>
        <h4>MORE TEXT</h4>
    </div>
  </div>
</section>

CSS（对于视频）：

.video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

所有文本组件都正常工作，我只希望视频看起来像上面的 link - 如果可能的话？

任何建议都会很棒！

谢谢

Answer 1

我将正文位置设置为相对位置，将子部分位置设置为绝对位置，这样这些部分就会相互重叠

你能检查视频是否全屏播放吗？你期待这样的事情吗？如果不是请描述

    .videoSection{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

http://plnkr.co/edit/0SpRNwJQrG22lZn08uy1?p=preview

Answer 2

这是我制作的快速版本，我想你正在寻找：https://jsfiddle.net/z9e1c3gb/2/

基本上我所做的就是给视频一个 ID，在 css 我做到了，所以视频将是屏幕高度的 100% 和宽度的 100%。

.divOne{
  background-color: #fff;
  width: 100%;
  height: 100vh;
}
.divTwo{
    background-color: black;
    width: 100%;
    height: 100vh;
}
#video{
  height: 100vh;
  width: 100vw;
}
.divThree{
    background-color: blue;
    width: 100%;
    height: 100vh;
}

<div class="divOne">

</div>
<div class="divTwo">
    <video controls id="video" style="width:100%; height:100%">
        <source src="video/MAIN.mp4" type="video/mp4">
    </video>>
</div>
<div class="divThree">

</div>

HTML 内联视频全屏

HTML Video fullscreen inline

html

css

video

fullscreen