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>