CSS/HTML5: прозрачный слой с псевдоэлементом над полноэкранным тегом видео?

Question

Я пытаюсь сделать это:

<video id="test" loop autoplay> 
    <source src="assets/videos/h264.mp4" type="video/mp4"> 
    <source src="assets/videos/h264.ogv" type="video/ogv"> 
    <source src="assets/videos/h264.webm" type="video/webm"> 
</video> 

CSS:

#test { 
    background:red; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
} 

#test:after { 
    content: ""; 
    background: #000; 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    height:100%; 
    width:100%; 
    z-index:1; 
} 

Почему это не работает? Похож на это для меня ... http://jsfiddle.net/13knrneg/

Если я заменю видеотег на div, он будет работать на 100%. Что я не понимаю здесь?

Answer 1

Вы должны использовать position: relative для видео блока и position: absolute для верхнего псевдо-слоя.

Попробуйте это:

#test { 
    background: red; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    display: block; 
    top: 0; 
    left: 0; 
} 

#test:after { 
    content: " "; 
    background: #000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 1; 
} 

Вы можете see the updated result here.