Как создать наложение поверх видео HTML5?

Question

Я пробовал всю предоставленную помощь, но все еще не могу заставить ее работать. Мне нужно, чтобы видео было width: 100% и height: 500px, и когда я пробовал другие предлагаемые решения здесь он работал, но видео было центральным квадратом в середине, а не широким экраном.

Любая помощь будет оценена по достоинству. Спасибо.

Вот что я пробовал: HTML:

<div class="header-unit"> 
<div id="video-container"> 
    <video autoplay loop class="fillWidth"> 
     <video id="video-overlay">gfgfgfgf</video> 
     <source src="makak.mp4" type="video/mp4" /> 
     <source src="http://Dimofinf.net/your-video-file.ogg" type="video/ogg" /> 
     <source src="http://Dimofinf.net/your-video-file.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. 
    </video>hghgfhgh 
</div> 
<!-- end video-container --> 

SASS kokozino: SASS:

.header-unit 
    height: 500px 
    border: 2px solid #000 
    border-right: none 
    border-left: none 
    position: relative 
    padding: 20px 

#video-container 
    position: absolute 
    z-index: 0 

#video-container 
    top: 0% 
    left: 0% 
    height: 100% 
    width: 100% 
    overflow: hidden 
    position: absolute 
    z-index: 1 

video 
    position: absolute 


video.fillWidth 
    width: 100% 

#video-overlay 
    position: absolute 
    z-index: 2 
    width: 600px 
    height: 500px 
    background: #333 

Еще раз спасибо!

Answer 1

Я думаю, вам нужно добавить максимальное значение z-index (z-index: 2147483647;) в ваш элемент overlay. этот трюк решит вашу проблему.

Оформить заказ this awesome fiddler пример.

#overlay { 
    position: absolute; 
    top: 100px; 
    color: #FFF; 
    text-align: center; 
    font-size: 20px; 
    background-color: rgba(221, 221, 221, 0.3); 
    width: 640px; 
    padding: 10px 0; 
    z-index: 2147483647; 
} 

#v { 
    z-index: 1; 
}