Question 395104 in CSS Question posted in
Some basic documentation can be found here.

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

When a video plays normally:

enter image description here

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:

enter image description here

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer right after I posted the question. The correct file to look for clues is probably chromium/third_party/blink/renderer/modules/media_controls/resources/mediaControls.css. And one may see

    video::-webkit-media-controls:not(.audio-only) div[pseudo="-webkit-media-controls-panel" i].scrubbing-message {
  background:
    linear-gradient(to top, var(--gradient-steps)) repeat-x top left,
    linear-gradient(to bottom, var(--gradient-steps)) repeat-x bottom left;
}

    So instead of fiddling with background-color, I used background: transparent and the style changed successfully.


  2. 0 
    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search