VC.One's Purported Solution

VC.One proposed a change in the CSS that was supposed to improve the look of the video player on Chrome/Chromium.

Here is his CSS, which is also included on this page:

    video::-webkit-media-controls-panel {
        background-color: rgb(255, 0, 255);
        border-radius: 10%;
        height: 30%;

        position: absolute;
        top: 40%;
        left: 20%;
    }

    video::-webkit-media-controls-enclosure{
        width: 90%;
    }

Here is his HTML. The only change I've made is to supply the name for the video I'm using.

<video width="350" height="240" oncontextmenu="return false;"
    playsinline muted autoplay loop
    disablepictureinpicture
    controls controlsList="nodownload noplaybackrate noremoteplayback ">
    <source src="video.mp4" type="video/mp4">
</video>

If you view this page using Chrome/Chromium, you will see that this is not an improvement. On opening and if you hover your cursor over the video, the control panel blocks the center portion of the video. The look of the control panel is bad on the page and ridiculous in full-screen mode.

Next, checkout the modification that TechDex enthused about as a "solution."