I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fine. Can anyone spot what I might be doing wrong?
Here is my HTML code:
<div class="player">
<video src="video.mp4" poster="video-poster.jpg" title="Video Name"></video>
</div>
And here is my CSS:
.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;
}