vue-video-wrapper

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

Supported Players

  • Vimeo :heavy_check_mark:
  • YouTube :heavy_check_mark:

A simple Vue.js component where you can wrap your Vimeo or Youtube embeded video and use their events.

Step 1: Installation:

Using npm:

    npm install vue-video-wrapper

Getting Started

Using globally:

import Vue from 'vue'
import VueVideoWrapper from 'vue-video-wrapper'

Vue.use(VueVideoWrapper)
Vue.use(VueVideoWrapper, { componentId: "another-component-name" }) //if you want to give another name to the component

Using locally:

import VueVideoWrapper from 'vue-video-wrapper'

export default {
    components: { VueVideoWrapper }
}

Examples

The required prop :player must receive a String with the name of the video player.

Vimeo

<video-wrapper :player="'vimeo'" :videoId="videoId" />

<another-component-name :player="'vimeo'" :videoId="videoId" />  <!-- if you changed the name of the component -->

Youtube

<video-wrapper :player="'youtube'" :videoId="videoId" />

<another-component-name :player="'youtube'" :videoId="videoId" />  <!-- if you changed the name of the component -->

You can see here a demo on CodeSandbox.

Props :memo:

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:

<video-wrapper :player="'vimeo'" :videoId="videoId" :autoplay="true" :playerHeight="500" />

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:

<video-wrapper :player="'youtube'" :video="videoId" :height="500" :width="800" />

Events :collision:

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

<template>
    <video-wrapper :player="'vimeo'" :videoId="videoId" @play="handlePlay" @pause="handlePause" />
</template>
<script>
export default {
    data() {
        return {
            videoId: "some-video-id"
        }
    },
    methods: {
        handlePlay() {
            console.log("playing video...");
        },
        handlePause() {
            console.log("pausing video...");
        }
    }
}
</script>

Youtube

  • ready
  • ended
  • play
  • pause
  • buffering
  • cued
  • error

Example

<template>
    <video-wrapper :player="'youtube'" :videoId="videoId" @play="handlePlay" @ended="handleEnded" />
</template>
<script>
export default {
    data() {
        return {
            videoId: "some-video-id"
        }
    },
    methods: {
        handlePlay() {
            console.log("playing video...");
        },
        handleEnded() {
            console.log("ended video...");
        }
    }
}
</script>

Player :star:

You have access to all api methods from both players through component referencing.

Vimeo

Check the Vimeo api methods

Example

<template>
    <video-wrapper ref="player" :player="'vimeo'" :videoId="videoId" />
</template>
export default {
    // ...
    methods: {
        playVideo() {
            this.$refs.player.play();
        },
        pauseVideo() {
            this.$refs.player.pause();
        }
    }
}
export default {
    // ...
    methods: {
        getDuration() {
            this.$refs.$player.$player.getDuration().then(function(duration) {
                // do something with the duration
            });
        },
        getCurrentTime() {
            this.$refs.$player.$player.getCurrentTime().then(function(seconds) {
                // do something with the current time
            });
        }
    }
}

Youtube

Check the Youtube api methods

Example

<template>
    <video-wrapper ref="player" :player="'youtube'" :videoId="videoId" />
</template>
export default {
  // ...
  methods: {
    playVideo() {
        this.$refs.player.player.playVideo();
    },
    pauseVideo() {
        this.$refs.player.player.pauseVideo();
    }
  }
}

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.