2

I'm trying to do this:

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

Why is this not working? Looks like this for me … http://jsfiddle.net/13knrneg/

If I replace the video tag with a div it works 100%. What am I misunderstanding here?

matt
  • 42,713
  • 103
  • 264
  • 397
  • The `video` tag doesn't support pseudo classes: https://stackoverflow.com/questions/27700951/before-after-pseudo-class-not-working-on-video-element – Jesse Nickles Jan 10 '23 at 20:46

1 Answers1

1

You should use position: relative for the video block and position: absolute for top pseudo-layer.

Try this:

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

You can see the updated result here.

nnn
  • 328
  • 3
  • 9