[SOLVED] HTML <video> element: how to remove the dark area around the timeline control when it appears?

HTML <video> element: how to remove the dark area around the timeline control when it appears?

When a video plays normally:

The timeline control will appear when one pauses the video or moves the mouse. In a WebKit-based browser like Chrome, it looks like this:

So there is a dark area around the timeline. How to modify/remove that overlayed effect, leaving only the timeline and the buttons/texts? I have played with the background-color of some pseudo-elements in chromium/Source/core/css/mediaControlsNew.css, such as video::-webkit-media-controls-enclosure or video::-webkit-media-controls-panel, but they don't control that part.

Solution

<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
    <style>
        /* Remove dark area around the timeline control */
        video::-webkit-media-controls-enclosure {
            background: none;
        }
    </style>
</head>
<body>
    <video controls width="600">
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>