vm-click-to-play

Enables toggling playback by clicking the player.

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-click-to-play></vm-click-to-play>

</vm-ui>

</vm-player>

React

import React from 'react';

import { Player, Ui, ClickToPlay } from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<ClickToPlay />

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<ClickToPlay />

</Ui>

</Player>

</template>

<script>

import { Player, Ui, ClickToPlay } from '@vime/vue';

export default {

components: {

Player,

Ui,

ClickToPlay,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<ClickToPlay />

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, ClickToPlay } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-click-to-play />

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-click-to-play></vm-click-to-play>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
useOnMobile	By default this is disabled on mobile to not interfere with playback, set this to true to enable it.	boolean	false

CSS Custom Properties

Name	Description
--vm-click-to-play-z-index	The position in the UI z-axis stack inside the player.

Dependencies

Used by

• vm-default-ui