vue-video-wrapper/dist/bundle.min.js

A Vue.js component to wrap embed iframes from Vimeo and Youtube.

!function(e,t,i){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e),o=r(t),a=r(i),s=["play","pause","ended","timeupdate","progress","seeked","texttrackchange","cuechange","cuepoint","volumechange","error","loaded"],u={videoId:{type:[String,Number],required:!0},playerHeight:{type:[String,Number],default:320},playerWidth:{type:[String,Number],default:640},options:{type:Object,default:function(){return{}}},videoUrl:{type:String,default:void 0},loop:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},controls:{type:Boolean,default:!0}},l=0,d={videoId:{type:[String,Number],required:!0},playerVars:{type:Object,default:function(){return{}}},height:{type:[Number,String],default:360},width:{type:[Number,String],default:640},resize:{type:Boolean,default:!1},resizeDelay:{type:Number,default:100},nocookie:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!1}},h=0,p=[{name:"YOUTUBE",component:{name:"YoutubePlayer",props:d,data:function(){var e;return h+=1,{player:{},events:(e={},e[-1]="unstarted",e[1]="play",e[2]="pause",e[0]="ended",e[3]="buffering",e[5]="cued",e),resizeTimeout:null,htmlId:"embed-youtube-video-"+h}},computed:{aspectRatio:function(){return this.width/this.height}},methods:{playerReady:function(e){this.$emit("ready",e.target)},playerStateChange:function(e){null!==e.data&&-1!==e.data&&this.$emit(this.events[e.data],e.target)},playerError:function(e){this.$emit("error",e.target)},updatePlayer:function(e){e?1!==this.playerVars.autoplay?this.player.cueVideoById({videoId:e}):this.player.loadVideoById({videoId:e}):this.player.stopVideo()},resizeProportionally:function(){var e=this;this.player.getIframe().then((function(t){var i=e.fitParent?t.parentElement.offsetWidth:t.offsetWidth,r=i/e.aspectRatio;e.player.setSize(i,r)}))},onResize:function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.resizeProportionally,this.resizeDelay)}},watch:{videoId:"updatePlayer",resize:function(e){e?(window.addEventListener("resize",this.onResize),this.resizeProportionally()):(window.removeEventListener("resize",this.onResize),this.player.setSize(this.width,this.height))},width:function(e){this.player.setSize(e,this.height)},height:function(e){this.player.setSize(this.width,e)}},beforeDestroy:function(){null!==this.player&&this.player.destroy&&(this.player.destroy(),delete this.player),this.resize&&window.removeEventListener("resize",this.onResize)},mounted:function(){window.YTConfig={host:"https://www.youtube.com/iframe_api"};var e=this.nocookie?"https://www.youtube-nocookie.com":"https://www.youtube.com";this.player=new a.default(this.$el,{host:e,width:this.width,height:this.height,videoId:this.videoId,playerVars:this.playerVars}),this.player.on("ready",this.playerReady),this.player.on("stateChange",this.playerStateChange),this.player.on("error",this.playerError),this.resize&&window.addEventListener("resize",this.onResize),this.fitParent&&this.resizeProportionally()},render:function(e){return e("div",{attrs:{id:this.htmlId}})}}},{name:"VIMEO",component:{name:"VimeoPlayer",props:u,methods:{update:function(e){return this.player.loadVideo(e)},play:function(){return this.player.play()},pause:function(){return this.player.pause()},mute:function(){return this.player.setVolume(0)},unmute:function(e){return void 0===e&&(e=.5),this.player.setVolume(e)},emitVueEvent:function(e){var t=this;this.player.on(e,(function(i){t.$emit(e,i,t.player)}))},setEvents:function(){var e=this;this.player.ready().then((function(){this.$emit("ready",this.player)})).catch((function(t){e.$emit("error",t,e.player)})),s.forEach((function(t){return e.emitVueEvent.call(e,t)}))}},data:function(){return{htmlId:"embed-vimeo-video-"+(l+=1),player:null}},render:function(e){return e("div",{attrs:{id:this.htmlId}})},mounted:function(){var e={id:this.videoId,width:this.playerWidth,height:this.playerHeight,loop:this.loop,autoplay:this.autoplay,controls:this.controls};this.videoUrl&&(e.url=this.videoUrl),this.player=new n.default(this.htmlId,o.default(e,this.options)),this.setEvents()},watch:{videoId:"update"},beforeDestroy:function(){this.player.unload()}}}],y={functional:!0,props:Object.assign({},{player:{type:String,required:!0,validator:function(e){return-1!==p.map((function(e){return e.name})).indexOf(e.toUpperCase())}},videoId:{type:[String,Number],required:!0}},u,d),render:function(e,t){var i=t.data,r=t.props,n=t.listeners,o=p.find((function(e){return e.name==r.player.toUpperCase()}));if(o)return e(o.component,{props:r,ref:i.ref,on:n})}};function f(e,t){if(void 0===t&&(t={}),!f.installed){f.installed=!0;var i=t.componentId;void 0===i&&(i="video-wrapper"),e.component(i,y)}}var c={install:f},m=null;"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.vue),m&&m.use(c),y.install=f}(VimeoPlayer,assign,YoutubePlayer);