Video Embed Component for Vue.JS

This is a component for Vue.js to utilize YouTube, Vimeo, DailyMotion, Coub… iframe embed API easily.

Support

• Youtube
• Vimeo
• DailyMotion
• Coub
  …

Install with NPM

npm install v-video-embed

Install with Yarn

yarn install v-video-embed

How to use Vue Video Embed

import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);

Vue Youtube Video Embed

<video-embed src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

You can add custom Youtube params

<video-embed :params="{autoplay: 1}" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

Vue Vimeo Video Embed

<video-embed src="https://vimeo.com/362754811"></video-embed>

Vue Dailymotion Video Embed

<video-embed src="https://dai.ly/x7n7y06"></video-embed>

Vue Coub Video Embed

<video-embed src="https://coub.com/embed/22eztb"></video-embed>

Change Display Ratio with Css Class

<!-- 21:9 aspect ratio -->
 <video-embed css="embed-responsive-21by9" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 16:9 aspect ratio: default -->
 <video-embed css="embed-responsive-16by9" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 4:3 aspect ratio -->
 <video-embed css="embed-responsive-4by3" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 1:1 aspect ratio -->
 <video-embed css="embed-responsive-1by1" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

Dynamic change Video Link

<video-embed ref="youtube" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

<button class="btn btn-primary" v-on:click="change">Change Url</button>


<script>


    export default {

        methods: {

            change() {

                this.$refs.youtube.src = "https://www.youtube.com/watch?v=nqwQpXoSN7Q";

            }
        }

    }
</script>

Use CDN

<script src="https://unpkg.com/v-video-embed/dist/video-embed.min.js" type="text/javascript"></script>

Source Code

https://github.com/nasa8x/v-video-embed

#vue #vuejs #vue-js #embed