vime-scrim

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

Usage

HTML

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-scrim></vime-scrim>

</vime-ui>

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeUi, VimeScrim } from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeScrim />

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeScrim />

</VimeUi>

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeUi, VimeScrim } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeScrim,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeScrim />

</VimeUi>

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeUi, VimeScrim } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-scrim />

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-scrim></vime-scrim>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
gradient	gradient	If 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" ∣ undefined	undefined

CSS Custom Properties

Name	Description
--vm-scrim-bg	The background color of the scrim.
--vm-scrim-z-index	The position in the UI z-axis stack inside the player.

Dependencies

Used by

• vime-default-controls

Graph

graph TD;

vime-default-controls --> vime-scrim

style vime-scrim fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS