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

You are currently viewing 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

 

 

 

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

 

 

 

Change Aspect Ratio of Videos Example

 

 

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

 

App.vue

 

 

 

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

 

 

Official Github Repository

 

Leave a Reply