Я хотел бы, чтобы мой элемент видео показывал заголовок поверх видео во время воспроизведения, проблема в том, что он не работает. Если я переключу тег <video> на <div>, он будет работать отлично. Что я делаю неправильно?

Моя HTML-разметка такая:

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

И мой 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;
}