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.5
(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
. - 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, @stateChange
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