未顯示視頻疊加

我試圖在視頻上疊加疊加，但未顯示。未顯示視頻疊加

虛線只顯示在左側和右側，白色覆蓋層根本不顯示。我也嘗試過z-index，但沒有結果。我正在使用Bootstrap。

這是我的HTML和CSS代碼：

#player { 
 
    margin-top: -200px; 
 
    margin-bottom: -200px; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#video-div { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    display: block; 
 
    height: 400px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.outer-container { 
 
    border: 1px dotted black; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.inner-container { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.video-overlay { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    margin: 10px; 
 
    padding: 5px 5px; 
 
    font-size: 20px; 
 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
 
    color: #FFF; 
 
    background-color: rgba(50, 50, 50, 0.5); 
 
}

<div> 
 
    <div class="row" id="video-row"> 
 
    <div class="col-xs-12" id="video-div" align="center"> 
 
     <div class="outer-container"> 
 
     <div class="inner-container"> 
 
      <div class="video-overlay">Some text here</div> 
 
      <video id="player" src="pathToFile" autoplay muted></video> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-23 user7611936

嘗試添加一個z-index：100;在.video-overlay中，它可能因爲某種原因被推下。我認爲它的視頻重疊你想展示在視頻前。 –

是的，謝謝！請問，請將此添加爲答案，以便我可以接受它？ – user7611936

您的歡迎和完成。我把它放在一個答案中， –

嘗試添加的z-index：100;在.video-overlay中，它可能因爲某種原因被推下。我想它的視頻覆蓋你想顯示在視頻前

.video-overlay { 
    z-index: 100; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    margin: 10px; 
    padding: 5px 5px; 
    font-size: 20px; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    color: #FFF; 
    background-color: rgba(50, 50, 50, 0.5); 
}

來源

2017-02-23 15:39:25

未顯示視頻疊加

回答

相關問題