Vue.js and YouTube

Last update: May 1, 2022

Vue YouTube Embed

This is a component for Vue.js to utilize YouTube iframe API easily. This is based on Angular YouTube Embed

License

MIT License

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
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" })

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>

Props

These are available props.

  • player-width: String or Number, default value is 640
  • player-height: String or Number, default value is 360
  • player-vars: Object, default value is {start: 0, autoplay: 0} Can also specify rel.
  • video-id: String, required
  • mute: Boolean default value is false
  • host: String default value is https://www.youtube.com. Can be set to https://www.youtube-nocookie.com as well.

Methods

These functions are the same as the original one.

  • getIdFromURL
  • getTimeFromURL
import { getIdFromURL, getTimeFromURL } from 'vue-youtube-embed'
let videoId = getIdFromURL(url)
let startTime = getTimeFromURL(url)

or

export default {
  methods: {
    method (url) {
      this.videoId = this.$youtube.getIdFromURL(url)
      this.startTime = this.$youtube.getTimeFromURL(url)
    }
  }
}

Events

These are the events that will be emitted by the component.

  • ready
  • ended
  • playing
  • paused
  • buffering
  • qued
  • error

The first argument contains the instance of YT.Player at the parameter target.

The way of start playing video automatically

<youtube :player-vars="{ autoplay: 1 }"></youtube>

Example on vue-play

// yarn or npm
yarn install
yarn run play

Example code

<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>
'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 = 'another video id'
    },
    stop () {
      this.player.stopVideo()
    },
    pause () {
      this.player.pauseVideo()
    }
  }
})

Usage with Nuxt SSR

To get this component working with Nuxt, wrap it in Nuxt's no-ssr component.

Contribution

contribution welcome!

GitHub

https://github.com/kaorun343/vue-youtube-embed
Comments
  • 1. Optionally load player only after clicking on a preview image

    I'm using vue-youtube-embed in quite a few projects now, thanks for the great work!

    I'm currently working on an application for mobile devices where I want to display multiple (10+) videos on one page, but the performance is really bad, especially on low end devices. I'd suggest adding an option where only an image tag with the preview image is loaded at first and after the user clicks on the image the real player is loaded and plays the video. If you want I can implement the functionality and submit a pull request.

    Reviewed by Sopamo at 2017-03-20 13:50
  • 2. Failed to execute 'postMessage' on 'DOMWindow'

    Since I changed HTTP to HTTPS then i found this error.

    www-widgetapi.js:117 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://centralhub.glorycitychurch.com').
    g.C @ www-widgetapi.js:117
    

    I am guessing that it is probably by the <youtube>, which uses http request as default. So where can I change it?

    Reviewed by haog1 at 2017-12-25 01:50
  • 3. Make it work under SSR

    Howdy; I used some simple detection for global window & document objects to short-circuit attempts to make the video play when using server-side rendering under Vue.js 2.x

    This is working for us currently, and tests are still passing. Let me know if you would like further changes or do not like this approach.

    Also - I didn't bump the package.json, so that might have to happen if you accept the PR and want to bump the version and publish to NPM.

    Thanks!

    Reviewed by EyePulp at 2017-09-28 22:04
  • 4. Added check for youtube destroy method in beforeDestroy

    We're using Vue-storybook (instead of Vue-Play) together with vue-youtube-embed. When I change a property of a component (in storybook) the beforeDestroy is executed, but for some reason the Youtube API destory method is not a function.

    The error: Error in beforeDestroy hook: "TypeError: this.player.destroy is not a function"

    To prevent this I added a check if the method is there, before executing it. This solves the issue.

    Reviewed by basschuitema at 2017-08-23 11:28
  • 5. ended() method not firing

    Nothing is happening in the ended() method when the video ends.

    <script>
    export default {
      methods: {
        ended() {
          console.log('Ended');
        }
      } 
    }
    </script>
    
    <youtube :video-id="videoId" @ready="ready" @ended="ended" player-width="100%" 
      player-height="57" :player-vars="{ autoplay: 0, controls: 1, modestbranding: 1, showinfo: 0, rel: 0 }">
    </youtube>
    
    Reviewed by lukeliasi at 2017-01-14 16:04
  • 6. Using with Nuxtjs (SSR)

    I have problems with rendering player in the page. It's rendering the player one time but when i refresh the page it will not render again, just remaining a div with id <div id="youtube-player-18"></div> like this.

    Any ideas on that?

    Reviewed by pwnz22 at 2017-08-15 20:31
  • 7. Unable to change video

    Hi, thanks for the composant !

    I don't know if it's a bug or a bad use but I can't manage to change the video on the player.

    div#player youtube(:video-id="current_song.id" player-width="0" @ready="isReady" @playing="isPlaying") Vuejs data : current_song : { "title" : "Tierney Terrace", "artist" : "Loyle Carner", "id" : "2WQSAkYL70I", "new" : false, "isActive" : false }

    And triggering a function changing the current_data object (with a new ID) doesn't update the player. Is it possible to change the videoId of the player while the video is playing ? (meaning, stop it and start it on a new video)

    Reviewed by kwnovi at 2017-02-02 16:34
  • 8. Updated to vue2

    Hey!

    I went ahead and updated it to vue2, please review the changes, but I've only changed ready to mounted everything else seemed vue2 compatible.

    The output file differs in some aspects, not sure if that's due to a different build environment...

    Reviewed by rigor789 at 2016-12-07 22:48
  • 9. how to add parameters (showinfo=0) in iframe url

    Hello,

    I'd like to add "&showinfo=0" in the url because I don't want share buttons and title, is there a attribute which can help me ?

    Thanks !

    Reviewed by eelbahri at 2017-11-29 11:19
  • 10. ready function never gets called

    Using your example, I am using an identical ready function.

    However it doesn't seem to fire, even though the videos load fine.

    This means I don't get local access to this.player, any advice?

    Reviewed by Fermain at 2017-06-27 15:38
  • 11. Dynamic youtube video from DB, how i can use stop()

    Hello, I'm noob in Vue.js, and i have list of video from DB. every this is work fine but i have 1 button for each video to close modal and stop video. But i dont now how i can stop video because is dynamic. can u help please, thank u in advance.

    Guest.txt

    Reviewed by bonzinho at 2017-05-05 11:34
  • 12. Bump karma from 2.0.4 to 6.3.16

    Bumps karma from 2.0.4 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    v6.3.15

    6.3.15 (2022-02-05)

    Bug Fixes

    v6.3.14

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    v6.3.13

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    v6.3.12

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    v6.3.11

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    6.3.15 (2022-02-05)

    Bug Fixes

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    6.3.10 (2022-01-08)

    Bug Fixes

    • logger: create parent folders if they are missing (0d24bd9), closes #3734

    ... (truncated)

    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • c1befa0 chore(release): 6.3.15 [skip ci]
    • d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls
    • 653c762 ci: prevent duplicate CI tasks on creating a PR
    • c97e562 chore(release): 6.3.14 [skip ci]
    • 91d5acd fix: remove string template from client code
    • 69cfc76 fix: warn when singleRun and autoWatch are false
    • 839578c fix(security): remove XSS vulnerability in returnUrl query param
    • db53785 chore(release): 6.3.13 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-02 03:33
  • 13. Bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 05:13
  • 14. Bump tar from 4.4.4 to 4.4.19

    Bumps tar from 4.4.4 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-01 02:26
  • 15. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 22:47
  • 16. Does not work with vue 3.0

    When trying to use an ionic5 App with vue 3.0.

    Fails with following error

    uncaught TypeError: Vue.prototype is undefined
        install vue-youtube-embed.js:224
    
    Reviewed by snimavat at 2021-08-04 11:36
Tombala is a Giveaway machine. It allows you to create giveaways using Youtube comments.
Tombala is a Giveaway machine. It allows you to create giveaways using Youtube comments.

tombala | Giveaway machine powered by Youtube API Tombala is a Giveaway machine. It allows you to create giveaways using Youtube comments. Used Tecnol

Jun 1, 2022
Spotify Wrapped but for YouTube (Because Rewind sucked).
Spotify Wrapped but for YouTube (Because Rewind sucked).

YouTube Wrapped ?? Spotify Wrapped but for YouTube. (Because Rewind sucked). Inspired by the Waveform podcast. How to use Request your data from Googl

Jun 22, 2022
A vue component library incubated from Tencent BlueKing which helps OPS in the field of front-end engineering to quickly build stable, accurate, and technologically-sense operation and maintenance tools and platforms

English | 简体中文 bk-vue-cec 基于蓝鲸 bk-magic-vue 修改风格并修复bug后的组件库,由DAO(去中心化自治组织)维护,收录于ti-design体系,请注意,其中cec表示community edtion components(社区版组件),并不是代表China E

Jun 29, 2022
[DEPRECATED] Jest preprocessor.js for Vue.js components (supporting html, pug, and babel) and TypeScript

❄️ DEPRECATION NOTICE ❄️ Official TypeScript and Jest support has been added to Vue.js 2.x, which has changed considerably since this repository has b

Dec 1, 2018
RequireJS plugin to async and dynamic load and parse .vue components
RequireJS plugin to async and dynamic load and parse .vue components

require-vuejs RequireJS plugin to async and dynamic load and parse .vue single file components This library has only 4Kb ( minified ). What this libra

Feb 25, 2022
A Vue project template with Loopback framework optionally with Vuex, Vue-router, and Auth boilerplaite

vue-loopback A Vue project template with Loopback framework featuring ES6, Gulp, and Jest for unit tests This template is for Vue 2.x only with vue-cl

Nov 18, 2021
A starter template for LoopBack 3.x And Vue 2.x with support for the new vue-cli v3
A starter template for LoopBack 3.x And Vue 2.x with support for the new vue-cli v3

LoopBack Vue Starter The LoopBack Vue Starter template has a very minimal set of features pre-enabled. The starter template uses LoopBack v3.x for API

Jul 4, 2022
Vue component to integrate Disqus count and comments in your application, with support for SPA

vue-disqus Vue component to integrate Disqus comments in your application Vue.js, with support for SPA and Vue 2.* Links Documentation Demo Contributi

Jun 26, 2022
🐙 Web3 blockchain bindings for Vue.js (inspired by Vuefire and Drizzle)

VueWeb3 Vue.js bindings for Web3 1.0 Installation In module environments, e.g CommonJS: npm install vue [email protected] vue-web3 var Vue = require('vue') va

Jun 7, 2022
Integration of FeathersJS, Vue, and Nuxt for the artisan developer

Feathers-Vuex Feathers-Vuex is a first class integration of FeathersJS and Vuex. It implements many Redux best practices under the hood, eliminates a

Jun 16, 2022
Vue LaunchDarkly plugin and routing utilities

Vue LaunchDarkly A simple wrapper around the js-client-sdk that provides observable feature flags, a ready state to ensure all feature flags are up to

Jun 7, 2022
Simple state management whitout bloating API and Concept for Vue.js.
Simple state management whitout bloating API and Concept for Vue.js.

Vue Freeze Simple state management whitout bloating API and Concept. Just states and actions. And also It will keep your state immutable. Vue Freezer

Apr 2, 2022
A solution to simplify import and use of Vue.js components

vue-import-and-use A solution to simplify import and use of Vue.js components Instalation $ npm install --save vue-import-and-use Without vue-import-a

May 3, 2020
🚀 Build .NET desktop applications using HTML, CSS and javascript.
🚀 Build .NET desktop applications using HTML, CSS and javascript.

Neutronium https://neutroniumcore.github.io/Neutronium/ What is Neutronium? Neutronium is a library to create .NET desktop applications using HTML, CS

Jun 11, 2022
Vuejs integration for Ionic versions 4 and 5
Vuejs integration for Ionic versions 4 and 5

Ionic-Vue Ionic integration adapters for Vue. Ionic-Vue vs @ionic/vue Ionic-Vue codebase has been contributed to the Ionic core and as @ionic/vue. How

Jun 26, 2022
This is a WebApp for Arbitrium API, you can use to access the targets devices in a simple and interactive way

Arbitrium WebApp This web interface is still in developpement, but it allows you to easily use the different features of ArbitriumRAT, the WebApp also

Feb 26, 2021
Vite 2 plugin that works with the dev server and rollup build.

vite-eslint Vite 2 plugin that works with the dev server and rollup build. Any errors from eslint should appear in the Vite overlay. Warning You proba

Nov 18, 2021
An intuitive observability client for @sherlog/cli. Replay and drill down through multiple log types as data is piped in
An intuitive observability client for @sherlog/cli. Replay and drill down through multiple log types as data is piped in

Sherlog Prisma An intuitive observability client for @sherlog/cli. Replay and drill down through multiple log types as data is piped in Demo: https://

Mar 29, 2022
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X

Vue Add To Calendar A Vue.js renderless component providing 'Add to Calendar' functionality Less than 1kb gzipped Demo What is a renderless component?

Jun 28, 2022