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
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 totrue
the host will be set tohttps://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