vm-youtube

Enables loading, playing and controlling videos from YouTube.

You don't interact with this component for passing player properties, controlling playback, listening to player events and so on, that is all done through the vime-player component.

Usage

HTML

<vm-player controls>

<vm-youtube video-id="DyTCOwB0DVw"></vm-youtube>

<!-- ... -->

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player controls>

<Youtube videoId="DyTCOwB0DVw" />

{/* ... */}

</Player>

);

}

Vue

example.vue

<template>

<Player controls>

<Youtube videoId="DyTCOwB0DVw" />

<!-- ... -->

</Player>

</template>

<script>

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

export default {

components: {

Player,

Youtube,

},

};

</script>

Svelte

example.svelte

<Player controls>

<Youtube videoId="DyTCOwB0DVw" />

<!-- ... -->

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player controls>

<vm-youtube videoId="DyTCOwB0DVw" />

{/* ... */}

</vm-player>

);

}

}

Angular

example.html

<vm-player controls>

<vm-youtube cookies="true" video-id="DyTCOwB0DVw"></vm-youtube>

<!-- ... -->

</vm-player>

Properties

Property	Description	Type	Default
cookies	Whether cookies should be enabled on the embed.	boolean	false
poster	The absolute URL of a custom poster to be used for the current video.	string ∣ undefined	undefined
showFullscreenControl	Whether the fullscreen control should be shown.	boolean	true
videoId (required)	The YouTube resource ID of the video to load.	string	undefined

Dependencies

Depends on

• vm-embed