HTML视频全屏内嵌

Question

不能使我想要的工作，所以会问专家。

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

但有它在文本块和（如果可能）开始滚动时过像这样页面（向下滚动到明白我的意思）之间： http://www.abc.net.au/news/2016-11-14/four-corners-broken-homes-child-protection/7987450

我可以使视频全屏，如果我只是按照波丽娜的例子，但不是当我试图把它放在其他文本块之间或我的网页。它始终只是回到了一个盒子或视频的实际大小。

如果可能的话，我想保持它非常简单 - 如果可能的话，只是CSS而不是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; 
} 

所有文本组件工作和罚款，我只想视频看起来像上面的链接 - 如果可能的话？

任何建议将是伟大的！

感谢

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>