Pseudo elements for <video> content and controls

[jakearchibald]

What problem are you trying to solve?

I want to apply CSS filters/adjustments to <video> content without impacting the visual appearance of controls & subtitles.

In another use-case, I want to display: none the video content, as I'm writing to it a <canvas> with post-processing, but I'd still like to overlay the browser playback controls.

What solutions exist today?

You can recreate the controls and video controls yourself, then apply CSS filters etc to the <video>.

How would you solve it?

Give <video> pseudo-elements such as:

• video::media-content - the poster and frame content
• video::media-controls - the controls

::cue already exists for text tracks.

::-webkit-media-controls is already a thing.

Anything else?

No response

[jakearchibald]

Couple of StackOverflow posts wanting this:

• https://stackoverflow.com/questions/46448664/how-to-apply-css-filter-to-video-without-affecting-controls-in-html5
• https://stackoverflow.com/questions/26892190/css-filter-video-but-not-the-controls

[ydaniv]

+1!
Same goes for clipping and masking the content.

[jakearchibald]

A fun hack is to do something like:

video {
  overflow: visible;
  translate: -2000px 0;

  &::-webkit-media-controls {
    translate: 2000px 0;
  }
}

That gives you the controls without the video. You still need to draw the video to a canvas before you can filter it. And this hack doesn't work in Firefox.

[lukewarlow]

It's worth also noting that as part of the invokers/commands proposal a number of people are keen on the idea of commands for controlling media elements and this is in part because styling the built-ins is hard/impossible, any step in the right direction would be good.

[annevk]

cc @whatwg/media @whatwg/css

[LeaVerou]

This kind of customization is also an excellent case for why natives should also be able to have slots.

Something like controlslist could also be useful. There are many use cases that basically need a slimmed down version of the default controls. Of course, with a good set of pseudo-elements they can just hide the controls they don't want, but it seems better if they can simply not generate them in the first place (and can use [controlslist~=] to style the rest accordingly).

[smfr]

Something similar could be useful for other replaced elements like <canvas> and <picture>/<img>. For example, you might want to apply dynamic-range-limit to the image content, but not its CSS backgrounds and borders. So I'd prefer an approach that is not specific to video and its controls.

[jakearchibald]

@smfr isn't the video content and its controls both part of the "replaced content"? Whereas solving this issue requires targeting them separately.

[smfr]

I guess so; maybe we need a way to address replaced element "primary" content if that's something we can define.