HTMLビデオフルスクリーンインライン

Question

私は仕事をしたいように思えるので、専門家に尋ねます。

私は、この古典的な例で達成したい： http://codepen.io/anon/pen/rWwaRE

をしかし、テキストとあなたがこのページのようにその上にスクロールする（可能な場合）、開始（私が何を意味するか見るためにスクロールダウン）のブロック間でそれを持っています： http://www.abc.net.au/news/2016-11-14/four-corners-broken-homes-child-protection/7987450

私は、テキストの他のブロックの間に、あるいは自分のページにそれを置くしようとしたとき、私はちょうどポリーナの例に従うが、そうでない場合、私は、ビデオのフルスクリーンを作ることができます。それは常にボックス内にあるか、ビデオの実際のサイズに戻るだけです。

可能であれば、私はそれをかなりシンプルに保ちたいと考えています。可能であれば、CSSSはJavascriptではありません。また、ビデオが自動的に起動しない場合、それはOKですが、フルスクリーンである限りです。

これは私が持っているものです。

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>