Html 5 video cc button

问题:

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

Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.

I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.

I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(

Any help will be greatly appreciated, thanks to everyone in advance. :)

Browser is chrome.

回答1:

So I found a solution to this for anyone who reads this post in the future and has a similar issue:

The issue: the Video and a parent div was being positioned using
transform: translate(-50%, -50%); This for some reason did did not effect the video pseudo elements of the video specifically the extras menu

The solution: remove the above line of code from the parent div and replace with

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

and position the video in a similar way instead of using the transform translate