NomNes / vue3-youtube

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