30

I would like my video element to show a title over the video while it's playing, the problem is: it doesn't work. If I switch the <video> tag to a <div> it works perfectly fine. What am I doing wrong?

My HTML markup is this:

<div class="player">
    <video src="video.mp4" poster="video-poster.jpg" title="Video Name"></video>
</div>

And my CSS is this:

.player {
    position: relative;
    width: 852px;
    height: 356px;
}
.player video {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
}
.player video::after {
    content: attr(title);
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    display: block;
    height: 20px;
}
Nathan Bishop
  • 623
  • 1
  • 5
  • 11

1 Answers1

42

Using :before or :after on a <video> tag won't work. You will also find this the case (sadly) with HTML input controls (e.g. textboxes).

This is because of the way :before and :after psuedo elements work. They are box model objects that work e.g. like a div but are placed inside their parent element. Elements like input text boxes and videos cannot contain child elements as far as content is concerned (video has src child tags but that is different).

E.g. if you had HTML:

<div class="awesome-highlight">
...
</div>

And CSS:

.awesome-highlight::after {
    content: 'Hello World';
}

The rendered effect will be:

<div class="awesome-highlight"> 
... 
Hello World
</div>

More info:

W3: http://www.w3.org/TR/CSS21/generate.html

Old Stackoverflow answer: Which elements support the ::before and ::after pseudo-elements?

Community
  • 1
  • 1
Samuel MacLachlan
  • 1,736
  • 15
  • 21
  • 1
    If anyone else is wondering what to do, you can add a `div` immediately after your video tag that is also `position:absolute` and style accordingly (e.g. CSS gradient, etc) like this: https://codepen.io/oscar-jite/pen/OJZVzOo – Jesse Nickles Jan 10 '23 at 20:57