youtube-vue

Youtube player component for vue.js 2.x

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
youtube-vue
1012.0.102 years ago5 years agoMinified + gzip package size for youtube-vue in KB

Readme

youtube-vue
Youtube Player Component for Vue.js 2.x. This is based on youtube-player Youtube Player for Vue 3.x--> Here npm npm GitHub stars GitHub forks Build Status license() ------------
Contact : stepanowon@hotmail.com
Author : Stephen Won(원형섭), OpenSG Inc.
Online Demo1 : https://youtube-vue.vercel.app/
Online Demo2 : jsfiddle

Screen Shot

License

MIT

Usage

CDN - install

~ ~

CDN - usage

~
<div>
<youtube-vue :videoid="video_id" :loop="loop" :autoplay="autoplay" />
</div>
...... ......
~

NPM - install

~ npm install --save youtube-vue
  • or -
yarn add youtube-vue
~

NPM - usage

~
<div>
video_id : <input type="text" v-model="temp.video_id" /><br />
loop : <input type="number"  v-model.number="temp.loop" /><br />
<button @click="applyConfig">Apply</button>
<button @click="playCurrentVideo">Play</button>
<button @click="stopCurrentVideo">Stop</button>
<button @click="pauseCurrentVideo">Pause</button>
</div>
<YoutubeVue ref="youtube" :videoid="play.video_id" :loop="play.loop" :width="480" :height="320"  
@ended="onEnded" @paused="onPaused" @played="onPlayed"/>
~

Props

* width
- type : Number
- width of player 
* height 
- type : Number
- height of player
* autoplay 
- type : Number
- default value : 0
- autoplay of player ( 0 , 1:autoplay) 
* videoid 
- type : String 
- Youtube video id
* loop
- type : Number
- default value : 0
- a setting of 1 causes the player to play the initial video again and again

methods

playVideo() stopVideo() mute() unMute() setVolume(number) : number => 0~100 getVolume() setSize(width, height) : you can set player size on run-time

events

ended : when current video is ended paused : when current video is pauded played : when video is played ready : when player is ready state