Кнопка HTML 5 видео cc

Question

HTML

<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)" 
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en" 
[src]="screen.data.ccs"/>
</video>

CSS

video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Кто-нибудь сможет пролить свет на то, почему кнопка «Подписи и загрузка» расположена там, где она находится на скриншоте выше, она была расположена правильно, поэтому мне интересно, произошло ли обновление Google Chrome, которое вызвало что-то, или я просто схожу с ума?ха-ха.

До сих пор я изучал элементы теневой гибели, но безуспешно возвращал кнопки в их исходное положение.

Мне также интересно, если у других была похожая проблема иесли какие-либо обходные пути / решения были найдены, я для моего проекта не имею права создавать какие-либо пользовательские элементы управления для видеопроигрывателя, поэтому, если это было возможным решением, его нет: (

Любая помощь будеточень признателен, спасибо всем заранее.:)

Браузер хром.

Answer 1

Итак, я нашел решение этой проблемы для тех, кто читает этот пост в будущем и имеет аналогичную проблему:

Проблема: Позиционирование видео и родительского div с использованием
transform: translate(-50%, -50%); Это по какой-то причине не повлияло на псевдоэлементы видео, в частности на дополнительное меню

Решение: удалить указанную выше строку кода из родительского divи замените на

position: absolute;
top: 50%;
left: 50%;

и расположите видео таким же образом вместо использования transform translate