Vue.js IFrame Embed Component For Youtube,Dailymotion,Vimeo Videos Using v-video-embed Library in Javascript Full Project For Beginners

Vue.js IFrame Embed Component For Youtube,Dailymotion,Vimeo Videos Using v-video-embed Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

Welcome folks today in this blog post we will be looking on how to `embed youtube,dailymotion,vimeo videos using vue.js component v-video-embed library in javascript. All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to initialize a new vue.js project and install the below library in it using the npm command as shown below

 

npm i v-video-embed

 

After installing this library your project directory structure will look like this as shown below

 

 

 

Basic Example

 

 

Now inside your vue.js project copy paste the below code inside your App.vue file

 

App.vue

 

<template>
  <div id="#app">
  <video-embed src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>
  <video-embed src="https://vimeo.com/362754811"></video-embed>
  <video-embed src="https://dai.ly/x7n7y06"></video-embed>

</div>
</template>

<script>
import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);


</script>

 

 

Here in the above vue.js file replace your youtube videoid which you want to embed on the page

 

Now if you open the vue.js project inside the browser you will see the below output

See also  Vue.js Nuxt.js Responsive Background Video Player Using vue-responsive-video-background-player Library in Javascript Full Project For Beginners

 

 

 

Change Aspect Ratio of Videos Example

 

 

You can also change the aspect ratio of videos as shown in the example

 

App.vue

 

<template>
  <div id="#app">
  <!-- 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>

</div>
</template>

<script>
import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);


</script>

 

 

Dynamically Change Video URL on Button Click

 

 

Now in this example we will  be seeing how to change the video url on button click by the user

 

App.py

 

<template>
  <div id="#app">
 <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>
</div>
</template>

<script>
import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);

export default {

        methods: {

            change() {

                this.$refs.youtube.src = "https://www.youtube.com/watch?v=kE0xMf4q4MU&ab_channel=WWE";

            }
        }

    }


</script>

 

Official Github Repository

 

Leave a Reply