vime-scrim

A darkened overlay or gradient that covers the current video to enable controls placed on it to be more visible.

Usage

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-scrim></vime-scrim>
</vime-ui>
</vime-player>

Properties

PropertyAttributeDescriptionTypeDefault
gradientgradientIf this prop is defined, a dark gradient that smoothly fades out without being noticed will be used instead of a set color. This prop also sets the direction in which the dark end of the gradient should start. If the direction is set to up, the dark end of the gradient will start at the bottom of the player and fade out to the center. If the direction is set to down, the gradient will start at the top of the player and fade out to the center."down" โˆฃ "up" โˆฃ undefinedundefined

CSS Custom Properties

NameDescription
--vm-scrim-bgThe background color of the scrim.
--vm-scrim-z-indexThe position in the UI z-axis stack inside the player.

Dependencies

Used by

Graph

graph TD;
vime-default-controls --> vime-scrim
style vime-scrim fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS