Embed a Vimeo player as a Vue 3 component with ease

vue-vimeo-player

Vue wrapper for Vimeo Embed Player.

Embed a Vimeo player as a Vue 3 component with ease, even with Nuxt.js SSR.

Installation

Using npm:

npm install vue-vimeo-player@next --save

of load it via CDN

<script src="//unpkg.com/vue-vimeo-player@next"></script>

Getting Started

You can either import it in your whole project

import vueVimeoPlayer from 'vue-vimeo-player'
import Vue from 'vue'
 
const app = Vue.createApp(App)

app.use(vueVimeoPlayer)

or import it locally in a component

  import { vueVimeoPlayer } from 'vue-vimeo-player'
  
  export default {
  	data: {},
  	components: { vueVimeoPlayer }
  }

Usage without module bundler

Just include the script from the CDN and attach it to your app instance

<script src="//unpkg.com/vue@2.4"></script>
<script src="//unpkg.com/vue-vimeo-player"></script>
<!-- .... -->
<vimeo-player :video-id='videoId'></vimeo-player>
<script>
const app = Vue.createApp(App)
app.use(VueVimeoPlayer.default)
app.mount(...)
</script>

Usage with Nuxt.js

As we know Nuxt.js allows the really cool advantage of Server Side Rendering, but this means there is no window variable.
To fix this, we need to tell Nuxt.js to skip rendering our component on the server and render it just on the Browser.

We need to create a file inside the plugins directory called vimeo-player.js or what ever you see fit.

// plugins/vimeo-player.js
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'

const app = Vue.createApp(App)
app.use(vueVimeoPlayer)

Now we need to tell Nuxt to load our plugin inside nuxt.config.js

// ....
plugins: [
    { src: `~plugins/vimeo-player` }
],
build: {
    vendor: [
      'vue-vimeo-player'
    ],
}
// ....

Now we have to use the client-only component to wrap the vue-vimeo component in the template.

<client-only>
  <vimeo-player ref="player" :video-id="videoID"/>
</client-only>

Props

Prop	Type	Default	Description	Required
autoplay	Boolean	false	The video automatically begins to playback as soon as it can do.	No
player-width	String or Number	640	The width of the video's display area	No
player-height	String or Number	320	The height of the video's display area	No
options	Object	{}	Options to pass to Vimeo.Player. See the Vimeo docs	No
video-id	String		Vimeo player unique identifier	Yes
video-url	String	undefined	Vimeo url to play video (if using private links)	No
loop	Boolean	false	Upon reaching the end of the video, automatically seek back to the start.	No
controls	Boolean	true	This parameter if `false` will hide all elements in the player (play bar, sharing buttons, etc) for a chromeless experience. ⚠️Warning: When using this parameter, the play bar and UI will be hidden. To start playback for your viewers, you'll need to either enable autoplay or use our player SDK to start and control playback. (available to Plus, PRO, or Business members)	No

Methods

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

Properties

Useful properties to interact with

player - The instance of the Vimeo player

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
playing
pause
ended
timeupdate
progress
seeking
seeked
texttrackchange
chapterchange
cuechange
cuepoint
volumechange
playbackratechange
bufferstart
bufferend
error
loaded
durationchange
fullscreenchange
qualitychange
camerachange
resize

Example

 // app.js
 import vueVimeoPlayer from 'vue-vimeo-player'
 import Vue from 'vue'
 import App from '@/App'

 const app = Vue.createApp(App)
 app.use(vueVimeoPlayer)

<template>
	<vimeo-player ref="player" :video-id="videoID" :player-height="height" @ready="onReady"/>
</template>
<script>
export default {
	data() {
		return {
			videoID: 'some-id',
			height: 500,
			options: {
				muted: true,
                autoplay: true,
			},
			playerReady: false
		}
	},
	methods: {
		onReady() {
			this.playerReady = true
		},
		play () {
			this.$refs.player.play()
		},
		pause () {
			this.$refs.player.pause()
		}
	}
}
</script>