@techassi/vue-youtube-iframe

vue-youtube-iframe

This plugin makes it easy to integrate the YouTube Iframe API into your Vue app. This plugin is Vue V3 compatible.

Notice

⚠️ The new version 1.0.6 (rewritten in Typescript) introduces the following breaking change:

The events @ended, @playing, @paused, @buffering and @cued will no longer be emitted. Instead you should now use @state-change to catch the events when the player state changes. This better represents the behaviour of the YouTube Iframe API described here.

New features

• Support for typings across the board. In detail these are type declarations for the plugin itself as well as YouTube Iframe specific typings under the namespace YT from @types/youtube (See here and here).
• API complete methods for pausing, stoping and queueing videos (See here)

Usage

Installation

npm install @techassi/vue-youtube-iframe --save

or

yarn add @techassi/vue-youtube-iframe

Basic usage

main.js / main.ts

import { createApp } from 'vue';
import App from './App.vue';

import YoutubeIframe from '@techassi/vue-youtube-iframe';

createApp(App).use(YoutubeIframe).mount('#app');

YourComponent.vue

<template>
    <youtube-iframe :video-id="YT_VIDEO_ID"></youtube-iframe>
</template>

Advanced usage

YourComponent.vue

<template>
    <youtube-iframe
        :video-id="YT_VIDEO_ID"
        :player-width="WIDTH"
        :player-height="HEIGHT"
        :no-cookie="TRUE / FALSE"
        :player-parameters="YT_PLAYER_PARAMS"
        @EVENT="CALLBACK"
    ></youtube-iframe>
</template>

Typings

Vue currently doesn't support typings when using a component in a SFC and accessing it via ref / this.$refs. There is a way to bring in typings when using ref. Please note: This isn't the most elegant solution.

<template>
    <youtube-iframe :video-id="YT_VIDEO_ID" ref="yt"></youtube-iframe>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Player } from '@techassi/vue-youtube-iframe';

export default defineComponent({
    name: 'App',
    mounted() {
        const player = this.$refs.yt as typeof Player;
        // Variable player now has typings
    },
});
</script>

Available props

• :videoId / :video-id: Specify the YT video id (e.g. dQw4w9WgXcQ)
• :playerWidth / :player-width: Specify the player's width in pixels
• :playerHeight / :player-height: Specify the player's height in pixels
• :noCookie / :no-cookie: If set to true the host will be set to https://www.youtube-nocookie.com
• :playerParameters / :player-parameters: Set player parameters, see here

Available player parameters

For the available player parameters see here

Available Events

@ready, @error, @state-change

For detailed event information check here

Contributing / Building

Contributions and pull request are welcome!

cd vue-youtube-iframe
yarn install / npm install
yarn run build / npm run build