CSS to modify the standard HTML5 video player

Need help
1

Hello.
My application has a page with a video player that plays a file hosted on my hosting. This is a standard HTML5 video player. I want to style it with CSS so that it has all controls disabled but has a big play button in the center.

I managed to remove all elements using the code:

< style >
video::-webkit-media-controls-panel {
display: none;
}
< /style >

Now I need to work with the Play button. I added a button image to the Bubble file manager. Pseudo-element selectors are responsible for its display in the player -

video::-webkit-media-controls-play-button

What CSS code should I write for this selector (with a link to the button and its placement in the center of the player)?

2
3

Thank you. I see that you have added HTML elements with JS and CSS code and changed the code in the HTML element of the player itself. But the play button is still not shown to start the video. I only fit a small rectangle under the video player.
videoplr.bubbleapps.io

4

On this page I am using the iFrame code provided by Oneline Player. In one case, the video file is located on my hosting, in the other - on Google Drive (which would be preferable for me). I would like to achieve this look and feel from a standard HTML5 player. I could use the oneline player but I’m afraid that if something happens to it I’ll need to spend a lot of time relinking in the database (several thousand files are supposed).

5

do not use as iFrame