Skip to main content
Version: 4.x

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