Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/techassi/vue-youtube-iframe
Integrate the YouTube Iframe player into your Vue 3 app.
https://github.com/techassi/vue-youtube-iframe
iframe typescript vue-youtube-iframe vue3 vuejs youtube youtube-iframe-api youtube-player
Last synced: 2 days ago
JSON representation
Integrate the YouTube Iframe player into your Vue 3 app.
- Host: GitHub
- URL: https://github.com/techassi/vue-youtube-iframe
- Owner: Techassi
- Created: 2020-10-05T13:17:05.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-01T10:25:01.000Z (over 2 years ago)
- Last Synced: 2024-05-01T17:42:44.809Z (7 months ago)
- Topics: iframe, typescript, vue-youtube-iframe, vue3, vuejs, youtube, youtube-iframe-api, youtube-player
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@techassi/vue-youtube-iframe
- Size: 175 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚠️ Notice
This plugin is deprecated. Please use the new and improved [@vue-youtube/core](https://github.com/vue-youtube/vue-youtube) plugin.
# vue-youtube-iframe
This plugin makes it easy to integrate the YouTube Iframe API into your Vue app. This plugin is Vue V3 compatible.
## Usage
### Installation
```shell
npm install @techassi/vue-youtube-iframe --save
```
or
```shell
yarn add @techassi/vue-youtube-iframe
```
### Basic usage
`main.js` / `main.ts`
```js
import { createApp } from 'vue';
import App from './App.vue';
import YoutubeIframe from '@techassi/vue-youtube-iframe';
createApp(App).use(YoutubeIframe).mount('#app');
```
`YourComponent.vue`
```vue
```
### Advanced usage
`YourComponent.vue`
```vue
```
### 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.
```vue
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
},
});
```
### 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)
### Available player parameters
For the available player parameters see [here](https://developers.google.com/youtube/player_parameters#Parameters)
### Available Events
```
@ready, @error, @state-change
```
For detailed event information check [here](https://developers.google.com/youtube/iframe_api_reference#Events)