Vue Video Wrapper 📹
A Vue.js component to wrap embeded iframes from Vimeo and Youtube.
Supported Players
- Vimeo ✔️
- YouTube ✔️
Intro
A simple Vue.js component where you can wrap your Vimeo or Youtube embeded video and use their events.
Installation 🔧
Using npm:
npm install vue-video-wrapper
Getting Started 🚀
Using globally:
Vue Vue //if you want to give another name to the component
Using locally:
components: VueVideoWrapper
Examples 👀
The required prop :player
must receive a String
with the name of the video player.
Vimeo
<!-- if you changed the name of the component -->
Youtube
<!-- if you changed the name of the component -->
🔍 You can see here a demo on CodeSandbox.
Props 📝
Both players
Prop | Type | Required | Default | Description |
---|---|---|---|---|
player | String | true | The embeded iframe player. Acceptable values: "Vimeo" and "Youtube", case insensitive. | |
videoId | String, Number | true | Video identifier. |
Vimeo
Prop | Type | Required | Default | Description |
---|---|---|---|---|
playerHeight | String, Number | false | 320 | Height of the embeded iframe player. |
playerWidth | String, Number | false | 640 | Width of the embeded iframe player. |
options | Object | false | {} | Options to pass to the Vimeo instance. See on https://github.com/vimeo/player.js/#embed-options |
loop | Boolean | false | false | Enable loop on the end of the video. |
autoplay | Boolean | false | false | The video starts automatically when it's ready. |
controls | Boolean | false | true | If false, all elements in the player (play bar, sharing buttons, etc) will be hidden. |
Example:
Youtube
Prop | Type | Required | Default | Description |
---|---|---|---|---|
height | String, Number | false | 360 | Height of the embeded iframe player. |
width | String, Number | false | 640 | Width of the embeded iframe player. |
resize | Boolean | false | false | Embeded iframe player proportionally scale height with its width. |
resizeDelay | Number | false | 100 | Delay in ms to before resize. |
nocookie | Boolean | false | false | If true use https://www.youtube-nocookie.com as host. |
fitParent | Boolean | false | false | Use parent's width. |
Example:
Events 💥
The component triggers events to notify the changes in the player.
Vimeo
- play
- pause
- ended
- timeupdate
- progress
- seeked
- texttrackchange
- cuechange
- cuepoint
- volumechange
- error
- loaded
Example
Youtube
- ready
- ended
- play
- pause
- buffering
- cued
- error
Example
Player ⭐️
You have access to all api methods from both players through component referencing.
Vimeo
Check the Vimeo api methods
Example
// ... methods: { this$refsplayer; } { this$refsplayer; }
// ... methods: { this$refs$player$player; } { this$refs$player$player; }
Youtube
Check the Youtube api methods
Example
// ... methods: { this$refsplayerplayer; } { this$refsplayerplayer; }