Vue.js wrapper for Vimeo Embed Player

Vue.js wrapper for Vimeo player

The Vue-vimeo-player is a Vue.js wrapper for the Vimeo Embed Player, which allows you to use the Vimeo player as a Vue component with ease, even with Nuxt.js SSR.

Take a look at the example below.

Example

To start working with the Vue vimeo player use the following command to install it.

npm install vue-vimeo-player --save

OR

yarn add vue-vimeo-player

of load it via CDN

<script src="//unpkgd.com/vue-vimeo-player"></script>

If used as a global component

import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'

Vue.use(vueVimeoPlayer)

If used as a local component

//In a component
import { vueVimeoPlayer } from 'vue-vimeo-player'

export default {
    data: {},
    components: { vueVimeoPlayer }
}

For usage with Nuxt.js please refer here.

Props

  • player-width: String or Number, default 100%
  • player-height: String or Number, default 320
  • options: Object - options to pass to Vimeo.Player
  • video-id: String, required
  • loop: Boolean
  • autoplay: Boolean

Methods

  • update(videoID): Recreates the Vimeo player with the provided ID
  • play()
  • pause()
  • mute()
  • unmute()

Events

Events emitted from the component.The ready event only passes the player instance

  • ready Every other event has these properties: (event, data, player)

  • play
  • pause
  • ended
  • timeupdate
  • progress
  • seeked
  • texttrackchange
  • cuechange
  • cuepoint
  • volumechange
  • error
  • loaded
<template>
    <vimeo-player ref="player" :video-id="videoID" @ready="onReady" :player-height="height">
    </vimeo-player>
</template>
<script>
export default {
data() {
    return {
        videoID: '141851770',
        height: 600,
        options: {},
        playerReady: false,
    }
},
methods: {
    onReady() {
        this.playerReady = true
    },
    play () {
        this.$refs.player.play()
    },
    stop () {
        this.$refs.player.stop()
    }
}
}
</script>

If you are interested for more or you have any bugs and suggestions, click here. That's it!

Created and submitted by @dmhristov.