VueJS Examples

Best VueJS YouTube Embed Components

A curated list of the best YouTube Embed libraries for VueJS.

1. vue-lazy-youtube-video

Here are the features of this library:

  • reduces initial load size by ~1.1MB per video
  • built with a11y in mind – fully accessible via keyboard and to screen readers
  • .webp thumbnail format for modern browsers that support it, with .jpg fallback for browsers that don't
  • fully customizable through props and slots

Step 1: Installation

Via NPM

$ npm install vue-lazy-youtube-video --save

Via Yarn

$ yarn add vue-lazy-youtube-video

Directly in browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Styles with CSS Custom Properties -->
<link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.css"></link>
<!-- Minified styles with CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.min.css"></link> -->
<!-- Styles without CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.simplified.css"></link> -->
<!-- Minified styles without CSS Custom Properties -->
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-lazy-youtube-video/dist/style.simplified.min.css"></link> -->
<script src="https://unpkg.com/vue-lazy-youtube-video"></script>
<script>
  // as a plugin
  Vue.use(VueLazyYoutubeVideo.Plugin)
  // as a component
  Vue.use('LazyYoutubeVideo', VueLazyYoutubeVideo.default)
</script>

Initialization

Styles

import 'vue-lazy-youtube-video/dist/style.css'

As a global component

⚠️ It must be called before new Vue().

import Vue from 'vue'
import LazyYoutubeVideo from 'vue-lazy-youtube-video'

Vue.component('LazyYoutubeVideo', LazyYoutubeVideo)

As a local component

import LazyYoutubeVideo from 'vue-lazy-youtube-video'

export default {
  name: 'YourAwesomeComponent',
  components: {
    LazyYoutubeVideo,
  },
}

As a plugin

⚠️ It must be called before new Vue().

import Vue from 'vue'
import { Plugin } from 'vue-lazy-youtube-video'

Vue.use(Plugin)

Usage

<template>
  <LazyYoutubeVideo url="https://www.youtube.com/watch?v=[VIDEO_ID]" />
</template>

Demo

Edit vue-lazy-youtube-video

Read more


2. vue-youtube

vue-youtube is an wrapper of YouTube IFrame Player API (YIPA).

What is the difference between other plugins? The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.

You can do something like:

export default {
  // ...
  computed: {
    player() {
      return this.$refs.youtube.player
    }
  },
  methods: {
    async playVideo() {
      await this.player.playVideo()
      // Do something after the playVideo command
    }
  }
}

Live demo built on top of the awesome codesandbox.

Step 1: Installation

npm install vue-youtube
# or
yarn add vue-youtube

Step 2: Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-youtube/dist/vue-youtube.js"></script>

Example

<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>
export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA'
    }
  },
  methods: {
    playVideo() {
      this.player.playVideo()
    },
    playing() {
      console.log('o/ we are watching!!!')
    }
  },
  computed: {
    player() {
      return this.$refs.youtube.player
    }
  }
}

or

<youtube :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>
export default {
  data() {
    return {
      videoId: 'lG0Ys-2d4MA',
      playerVars: {
        autoplay: 1
      }
    }
  },
  methods: {
    playing() {
      console.log('o/ we are watching!!!')
    }
  }
}

Read more


3. vue-responsive-youtube

This is Vue.js component to embed youtube videos to your project RESPONSIVELY.

How to use:

Copy Youtube.vue to your project and use it as follows:

// maxWidth is optional
<Youtube videoId="8Hgt9HYaCDA" maxWidth="360px" />

スクリーンショット 2019-05-10 16 07 05
Read more


4. vue-youtube-embed-lite

Embed YouTube player without iframe for better performance.

Here is the Demo.

Step 1: Install

npm i @miyaoka/vue-youtube-embed-lite

Step 2: Usage

<template>
  <YoutubeEmbedLite
    vid="M7lc1UVf-VE"
    thumb-quality="hq"
    :params="{start: 100}"
  />
</template>

<script>
import YoutubeEmbedLite from '@miyaoka/vue-youtube-embed-lite'

export default {
  components: {
    YoutubeEmbedLite
  }
}
</script>

Read more


5. vue-youtube-embed

This is a component for Vue.js to utilize YouTube iframe API easily.

This is based on Angular YouTube Embed

Step 1: Install

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

or

// NPM
npm i -S vue-youtube-embed

// or with Yarn
yarn add vue-youtube-embed

Step 2: Import

import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(VueYouTubeEmbed)
// if you don't want install the component globally
Vue.use(VueYouTubeEmbed, { global: false })
// if you want to install the component globally with a different name
Vue.use(VueYouTubeEmbed, { global: true, componentId: "youtube-media" })

Step 2: Usage

Please pass the ID of the video that you'd like to show.

<youtube :video-id="videoId"></youtube>

<!-- or with a custom component identifier -->
<youtube-media :video-id="videoId"></youtube-media>

Read more


6. v-video-embed

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

Demo

Vue Video Embed

Step 1: Install

npm install v-video-embed
yarn install v-video-embed

Step 2: Use CDN

<script src="https://unpkg.com/v-video-embed/dist/video-embed.min.js" type="text/javascript"></script>
import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);

Youtube

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

# custom params

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

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

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

# coub
<video-embed src="https://coub.com/embed/22eztb"></video-embed>
<!-- 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>

<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>

Read more


7. 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.

Read more


8. vue-lazytube

Embed a YouTube or Vimeo player easily and lazy load the video to save resources and reduces initial load size.

Useful when performance and page size is important or for sites with many embedded videos.

For a simple example page with 10 videos, vue-lazytube will reduce loadtime by 7x and memory usage by 2-3x.

Demo online

Features

  • reduces initial load size by ~1.1 MB per video
  • fully responsive and customizable through props
  • provides methods to control (play, stop, pause and reset) embedded videos
  • provide options to set up custom title and preview of embedded videos
  • platform supported: Youtube and Vimeo

Step 1: Installation

With a build systems

$ npm install --save vue-lazytube
$ yarn add vue-lazytube

Step 2: To make the plugin available globally

In your main.js:

import LazyTube from "vue-lazytube";

Vue.use(LazyTube);

To include only in specific components

import { LazyYoutube, LazyVimeo } from "vue-lazytube";

export default {
    name: 'YourComponent',
    components: {
        LazyYoutube,
        LazyVimeo
    },
}

Step 3: Usage

<template>
    <!-- Youtube Embed -->
    <LazyYoutube src="https://www.youtube.com/watch?v=TcMBFSGVi1c" />

    <!-- Vimeo Embed -->
    <LazyVimeo src="https://player.vimeo.com/video/64654583" />
</template>

Read more


9. vue-lite-youtube-embed

A private by default, faster and cleaner YouTube embed component for Vue applications.

Port of React Lite YouTube Embed to a Vue Component. Provide videos with a supercharged focus on visual performance. An "Adaptive Loading" way to handle iframes for YouTube.

Step 1: Installation

Vue 3:

yarn add vue-lite-youtube-embed

Vue 2:

yarn add vue-lite-youtube-embed @vue/composition-api

Step 2: Usage

<template>
  <LiteYouTubeEmbed
    id="dQw4w9WgXcQ"
    title="Rick Astley - Never Gonna Give You Up (Official Music Video)"
  />
</template>

<script>
import { defineComponent } from 'vue'
import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
import 'vue-lite-youtube-embed/dist/style.css'

export default defineComponent({
    components: { LiteYouTubeEmbed }
})
</script>

Read more