Vue.js Youtube Video IFrame Embed Example Using vue-youtube-embed Library in Javascript Full Project For Beginners

Vue.js Youtube Video IFrame Embed Example Using vue-youtube-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 videos IFrame using vue-youtube-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 vue-youtube-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">
  <section>
    <h2>listening events</h2>
    <youtube :video-id="videoId" @ready="ready" @playing="playing"></youtube>
  </section>
  <section>
    <h2>add options</h2>
    <youtube :video-id="videoId" player-width="1280" player-height="750" :player-vars="{autoplay: 1}"></youtube>
  </section>
</div>
</template>

<script>
'use strict'
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'

Vue.use(VueYouTubeEmbed)

const app = new Vue({
  el: '#app',
  data: {
    videoId: 'videoId',
  },
  methods: {
    ready (event) {
      this.player = event.target
    },
    playing (event) {
      // The player is playing a video.
    },
    change () {
      // when you change the value, the player will also change.
      // If you would like to change `playerVars`, please change it before you change `videoId`.
      // If `playerVars.autoplay` is 1, `loadVideoById` will be called.
      // If `playerVars.autoplay` is 0, `cueVideoById` will be called.
      this.videoId = '-oANyXneteA'
    },
    stop () {
      this.player.stopVideo()
    },
    pause () {
      this.player.pauseVideo()
    }
  }
})
</script>

 

See also  Vue.js Temperature Converter (Celsius + Fahrenheit) Widget in Browser Using Javascript Full Project For Beginners

 

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

 

 

 

Browser Usage

 

<script src="vue-youtube-embed.umd.js"></script>
<script>
Vue.use(VueYouTubeEmbed)
</script>

 

 

DOWNLOAD SOURCE CODE

 

Leave a Reply