Package Exports

vue3-youtube
vue3-youtube/dist/vue3-youtube.common.js
vue3-youtube/dist/vue3-youtube.umd.js
vue3-youtube/dist/vue3-youtube.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-youtube) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-youtube

Wrapper for YouTube IFrame Player API

Installation

npm install vue3-youtube
# or
yarn add vue3-youtube

Usage

Browser:

<script src="dist/vue3-youtube.umd.min.js"></script>

Global registration:

import Vue from 'vue'
import YouTube from 'vue3-youtube'

Vue.component('YouTube', YouTube)

or locally:

<template>
    <YouTube 
        src="https://www.youtube.com/watch?v=jNQXAC9IVRw" 
        @ready="onReady"
        ref="youtube" />
</template>

<script>
import { defineComponent } from 'vue'
import YouTube from 'vue3-youtube'

export default defineComponent({
    components: { YouTube },
    methods: {
        onReady() {
            this.$refs.youtube.playVideo()
        },
    },
})
</script>

Props

Name	Type	Default	Description
src	String		Youtube video link or ID. Required.
width	Number, String	640	Player width.
height	Number, String	360	Player height.
host	String		Points host to correct origin for CORS.
vars	Object		Player parameters.

Events

ready
state-change
playback-quality-change
playback-rate-change
error
api-change

Methods

https://developers.google.com/youtube/iframe_api_reference#Functions