CSS/HTML5：在全屏视频标签上带有after伪元素的透明层？

我正在尝试这样做：

<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>

为什么这不起作用？看起来这对我来说

---

如果我用div替换视频标签，它将100%工作。我在这里误解了什么？

您应该对视频块使用

位置：相对
，对顶部伪层使用
位置：绝对

试试这个：

#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;
}

你可以

#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;
}