背景ビデオリンクを無効にする

Question

私は背景ビデオといくつかのコンテンツを持つコンテナを持っています。問題は、背景ビデオがコンテンツ（ボタン）を無効にしていることです。

JSbinリンク：http://jsbin.com/vehonetoxa/edit?html,output

コード：

<main style="height:723px"> 
    <div class="background" id="bgVideo" style="opacity: 0.2;"> 
     <video autoplay="autoplay" id="video_background" loop="loop" preload="auto" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: -100; min-width: 100%;min-height:100%;"> 
      <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-41f7830386411c84a3ecb1e33407aee340d0f51e0f2bc4960397b17b73e44e52.mp4" type="video/mp4"> 
       <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-b73e242581b99456fb569e1dba4ce6a21972e59c458432329a4b48eb8db5d3fe.ogv" type="video/ogg"> 
        <source alt="ekin care preview" src="https://dhqfzvce2gbm4.cloudfront.net/assets/video/preview-2919a66a9f41eb7bb41adfb66d347a01ec94d5cf989d776668a190fcbdac9df0.webm" type="video/webm"> 
        </source> 
       </source> 
      </source> 
     </video> 
    </div> 
    <div class="container-fluid mb-xl center-align" style="background-color: #2bbcf3; min-height: 723px;"> 
     <div class="text-center"> 
      <h1 class="white-text">Take Charge of your health</h1> 
       <p class="white-text text-size-medium mb-md bolded-text-lg">India's first personel digital health assistance</p> 
       <a class="btn btn-default get-started-btn bolded-text-lg txt-blue" href="/register" style="color:#2bbcf3">GET STARTED-FREE FOREVER</a> 
     </div> 
    </div> 
</main> 

Answer 1

だけで以下のように、あなたのBTNにposition absoluteを追加します。

<a class="btn btn-default get-started-btn bolded-text-lg txt-blue" href="/register" style="color:#111;position:absolute;">GET STARTED-FREE FOREVER</a> 

Answer 2

あなたの映像が重なっているコンテンツ。それをz-indexでposition: relativeにしてください。

.container-fluid { 
    position: relative; 
    z-index: 10; 
} 

Answer 3

<div class="container-fluid mb-xl center-align" style="style="background-color: rgba(43, 188, 243, 0.35);min-height: 723px;width: 100%;position: absolute;"> 
... 

Answer 4

動画が重複しています。

私はあなたのビンを更新しました。

Background Video