0.1.7 • Published 3 years ago

@matej-m/vue3-youtube v0.1.7

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

NameTypeDefaultDescription
srcStringYoutube video link or ID. Required.
widthNumber, String640Player width.
heightNumber, String360Player height.
hostStringPoints host to correct origin for CORS.
varsObjectPlayer parameters.

Events

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

Methods

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