Hello,

I am using this great library with typescript and VS Code is warning about missing declaration file.

Hello,

Thank you for your work on this component.
I try to access to getDuration(), according to the Youtube API. But i can not get the value, it returns me a function as a string. When I try to log I get a ReactiveGetter().
I made a demo here : https://codesandbox.io/s/9vwmmz30r

M.

I have player:

<youtube :video-id="videos[id].videoId" :player-vars="videos[id].playerVars" @ended="nextVideo()" />

And function:

nextVideo(){
      this.id+=1
      console.log('Triggered')
},

When video with custom end time ends, I see 2 or 3 "Triggered" in console.

I have a bug where when I change the player video-id, the video title disappears.

Example:
https://codesandbox.io/s/yqnomp1xjz

Does anyone know how to fix that?

Hi. Thank you for this component.

I have little issue - I want to make input field for YouTube video ids and by clicking on a button "play" I want to start video playing. The problem is the next: when I click "play", I see that ID is assigned to videoId, but in order to actually start a video playing, I need to click "play" again.

However if videoId is hardcoded (videoId: 'lG0Ys-2d4MA', how it is shown in your examples), video starts by the 1st click on 'play'. Also if input's v-model="videoId" (not providedId) video is downloading immediately and by clicking on play it starts to play, but I do not need auto-downloading once input is changed - I want to download video just by clicking on play.

Below is the minimal reproducible example

template

<input type="text" v-model="providedId"/>
<button @click="playVideo">play</button>
<youtube :video-id="videoId" ref="youtube"></youtube>

script

export default {
  data () {
    return {
     videoId: '', // <<-- empty srting
    providedId: ''
    }
  },
  methods: {
    playVideo () {
      this.videoId = this.providedId // <<-- assign video id
      this.player.playVideo()
    },
  },
  computed: {
    player () {
      return this.$refs.youtube.player
    }
  }
}

Can you please help me to solve this issue?
Thanks.

I'm having trouble resizing the iframe using the resize or fitparent props. Here is the code I used.

<div style="width: 100%">
<youtube :video-id="videoId" ref="youtube" @playing="playing" fitparent=true ></youtube>
</div>

<youtube :video-id="videoId" ref="youtube" @playing="playing" width="100%" resize=true ></youtube>

It's my understanding that the vue-youtube.esm.js file should be a standard ES module. This is great as it allows modern projects that are making use of ES modules without requiring bundlers and loaders.

But the file makes use of require which is not standard ES Module syntax. IMO, it should be doing an import at the top of the file (eg: import player from 'youtube-player').

https://github.com/anteriovieira/vue-youtube/blob/master/dist/vue-youtube.esm.js#L66

Hi, thanks a lot for this wrapper for the Youtube API.

I'm having some trouble figuring out how to display a timestamp in my UI that updates as the video is playing (00:01, ...), because using setTimeout doesn't work due to this.player.getCurrentTime() being a Promise.

Any idea on how to do this?

I really commend the great effort put into this package.

I'm currently using version 1.3.4

I have a method as below

getId() { return this.$youtube.getIdFromUrl(this.videoUrl); }

The out output of console.log(this.$youtube); is shown in the attached screenshot

Please how can i resolve this?

Hi,

I'm trying to use this wrapper in my new project, however I've run into a problem - the player itself works exactly as intended, but I can't control it in code.

Extremely simple example:

      <youtube :video-id="videoId" ref="youtube" width="600" height="400" :player-vars="playerVars"></youtube>
      <button @click="play">PLAY</button>

methods: {
   play () {
     this.$refs.youtube.player.playVideo()
   }
}

The player itself works - I can click it to start the video, skip around, et cetera. However, the play() method does nothing. All it returns is an empty, pending promise

Have I missed something? I'm assuming that were the promises to resolve, it would allow me to control the player.

I set modestbranding to 1, but the logo is still displayed.

My code:

Youtube(:video-id="videoId" :player-vars="{ modestbranding: 1 }")

Actual behavior: Showing logo
Expected: Not to show logo

Param is taken from here: https://developers.google.com/youtube/player_parameters

Hey, I was looking for a way to disable the controls/title on the iframe and didn't find a way,
it would be nice to be able to do that :D

Hi, I'm trying to make the video start with a specific second. I read the document
https://developers.google.com/youtube/iframe_api_Vference#loadVideoByUrl and try to add "startSeconds" to the "player-vars" prop but it doesn't seem to work

I want change info of youtube into my info on popup when lock screen on window 10 (image 1)
please help me!
sorry my english is bad!

How to play an video after the player is ready?

My app has buttons for load different videos in an unique instance of vue-youtube. I need click in some button and after player loaded, i need play this video.

Hi. I'm testing your component. I found this error in browser console:

Unable to post message to https://www.youtube.com. Recipient has origin http://localhost:8081.

Could you explain what it means and how to fix it? What „message” does it want to post?

observed: youtube(video-id="foo" player-vars="{ rel: 0}" ref="youtube") somehow does not add the rel=0 attribute to the iframe.

expected: "rel=0" would be added as attribute once passed as player var.

I'm getting the above warning for every vue-youtube video that loads. I've tried adding the origin to the playerVars prop with no avail.

I'm on vue-youtube version ^1.4.0 and chrome.

Any help would be much appreciated.

Hello. Have only been using vue.js for 1-2 days. Could you provide a more detailed example of hooking the 'playing' event with a callback?

Hi ,

How to can i set the size of the Iframe?
I have to make it responsive and the following does not work. Can someone help?
v-layout row>
v-flex xs12 sm6 offset-sm3>
<youtube :video-id="getId" ref="youtube" @playing="playing">
v-flex>
v-layout>

sorry i have a question
when i change videoId , just saw cued event and get jpg error
How do I know in advance that the URL is invalid before play video?

Hi, first of all, thank you for this great project.

I apologize if I just missed something in the docs about how to do this, but it seems that some of the events from the youtube api are not accessible directly through vue-youtube with an @event binding in the template. As the subject of this email imples, I'm specifically interested in onPlaybackChange - although onStateChange would be nice too.

I do see that you have access to the addEventListener method of the player, which allows you to add the name of function to call. So, something like, this.player.addEventListener('onPlaybackChange', 'myFunction'). But, as far as I can tell the 'myFunction" needs to live on the global window. Maybe there is a better way to do this, but for now I'm putting a function on "window", which is not ideal.

Once again thanks.

I stored video ids in my database and now I want to loop through them and add a vue-youtube component for each of them.
This is working but when I want to change the class of the component using the onPause() event? It doesn't work.
How do I style the video iframes and change classes based on the current video that was clicked on the browser?

I've seen this in this component: https://github.com/stepanowon/youtube-vue
However, I'm not able to make it work properly and as simply as yours...

Problem

To use Youtube GDPR compliant, I don't want to use the default config of the youtube player. Rather use the nocookie-domain:

direct implementation:

var player;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
      	var firstScriptTag = document.getElementsByTagName('script')[0];
      	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

player = new YT.Player('player1', {
	    wmode: 'transparent',
            host: 'https://www.youtube-nocookie.com',
	    playerVars:{
		   wmode: 'transparent',
		   showinfo:0,
		   autohide:1,
            },
	  videoId: YOUR_VID_ID,
	  events: {
		  'onReady': onPlayerReady
		}
        });

https://portalzine.de/dev/api/youtube-iframe-api-and-cookieless-domain-solution-gdpr-dsgvo/

How to fix?

Add a new prop nocookie boolean flag and set the host accordingly.

Hi,

I try to call some function like playVideo() inside a watcher (i want the video reload when videoId change).
I don't know why, but it doesn't work! If i call it from mounted() lifehook, or from a click action it work like expected, but not if i pass by watchers.

I'm sure you know why! i thinks it's because i need to do something more to be sure that player is ready, like for getCurrentTime function.

Thanks.

EDIT : Sorry, i found a solution using the updated lifehook and that works nice! But i'm still curious of why this is working in mounted/updated function but not in computed/watchers?

Currently all the plays on the embedded youtube video will get tracked and stored in user's youtube watch history, this might not be an intended behaviour of many apps.

Adding an option to disable this would be awesome, and I think this can be implemented simply by adding -nocookie to the youtube embed URL, such as https://www.youtube-nocookie.com/embed/O17OWyx08Cg.

More about this mode can be found here

Hi, i'm using vuex in my project and but i can't make your component work with it, i always get the issue 'Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.'

Do you a have a solution for that?

When the onError event fires, I would like to access the error code, however this plugin currently returns only the event.target, which—as far as I can tell—is only the YouTube player object without any internal error logs.

The YouTube API says that the error code is available via event.data.

This plugin (playerError()): https://github.com/anteriovieira/vue-youtube/blob/master/src/vue-youtube.js#L68
YouTube API (onError()): https://developers.google.com/youtube/iframe_api_reference#onError

The code this.player.getCurrentTime() always returns 0.

Hello,

I have been using your plugin and keep getting this error in the chrome console.

www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://mysite.com').

Maybe this link can help you fix the issue in your code:
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

I am using the version 1.3.5

Thank you.

Embedding video to the page causes this error in the console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin (*host name*)

You can even see this error in the console on the demo page of the plugin.

As per the Vue.js Dev tools:

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Antério, very nice plugin! I'd like to use a playlist ID instead of video ID, whats the way?

Antério, muito bom seu plugin, estou utilizando ele no momento, porém gostaria de saber se é possível usar uma ID de playlist.

Hi there! I am writting a small app and i have noticed that unavailable videos don't trigger the error function and i do not belive there is another way to detect this

Hello.

Would be nice to add lazy loading for YouTube video. It's the best practice on mobile devices and people who use low signal Internet. And, of course, for Google Search, because page loaded faster.

For example, something like this: https://codepen.io/tutsplus/pen/RRVRro

I'm 90% sure this is my fault and not yours. ;) I'm trying to use this in a CodePen demo. In my settings I've added https://raw.githubusercontent.com/anteriovieira/vue-youtube/master/dist/vue-youtube.js as a dependency. But any use of VueYoutube returns an error because it isn't defined. According to CodePen, any external JS libraries are loaded before your code is executed so I'm not quite sure what's wrong. Any ideas?

Hi

I used this componet but i dont remember when it is , many many days after , i get this error and my embed video does not play in my computer. But at other clients , it works. Do you know why it is ?
https://www.youtube.com/youtubei/v1/player?key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8 401

Heyho!

I wanted to hide the vue-youtube component by using a simple v-if. Unfortunately, I wasn't able to recover the iFrame properly.

I tried to create a JSFiddle so you see what I mean, but because of the require call in your dist js file it doesn't work out. So here is the code I'm using:

<template>
  <button @click="reEnableVideo">
    Film nochmal abspielen
  </button>
  <youtube :video-id="videoId" :player-vars="playerVars"
    @ended="videoEnded"  allowfullscreen ref="youtube"
    v-if="!hasEnded"></youtube>
</template>

<script>
  export default {
    data () {
      return {
        videoId: 'BBJa32lCaaY',
        playerVars: {
          showInfo: 0
        },
        hasEnded: false
      }
    },
    computed: {
      player () {
        return this.$refs.youtube.player
      }
    },
    methods: {
      videoEnded () {
        this.hasEnded = true
      },
      async reEnableVideo () {
        this.hasEnded = false
        await new Promise((resolve) => { setTimeout(resolve, 1050) })
        this.player.playVideo()
      }
    }
  }
</script>

Running into the following issue trying to use vue-youtube on Vue 3 RC

Installed vue-youtube via npm, and imported it into my project globally in main.js following the directions given by the Vue 3 docs.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueYoutube from 'vue-youtube'

createApp(App)
  .use(VueYoutube)
  .mount('#app')

In the console, I get the following error:

Uncaught TypeError: Cannot set property '$youtube' of undefined

Might be something minor?

Should not raise

 [Vue warn]: Missing required prop: "videoId"

if playerVars has a valid value for playlist .

Having a issue using VueYoutube component in single file component.
I am using props for :video-id. Modal.vue component is than used in another Component file. But the error is 'created' in Modal.vue.
With VueJS i am using NuxtJS.

vue-youtube version is ^1.3.4. & nuxt is 2.0.0

components/Modal.vue:

<template>
    <div class="modal-backdrop">
        <i class="icon ion-ios-close close-icon" @click="close"></i>
        <div class="modal">
            <VueYoutube :video-id="videoLink" ref="youtube"></VueYoutube>
        </div>
    </div>
</template>

<script>
import VueYoutube from 'vue-youtube';

export default {
    name: 'Modal',
    // Methods
    methods: {
        close() {
            this.$emit('close');
        },
        playVideo() {
            this.player.playVideo();
        }
    },
    // Props
    props: ['videoLink'],
    components: {
        VueYoutube
    },
    computed: {
        player() {
            return this.$refs.youtube.player;
        }
    }
};
</script>

VueJS Throws This Error:

Any possible solution for this?

Width and Height props use provided values just at initial load. Later when I change props values, Youtube window does not change its size.
Demo

Hi @anteriovieira ,
since some days my thumbnails are blurry.
I already found this: https://support.google.com/youtube/thread/8920318?hl=en
I also found "somehow" a solution to fix this, by using the high resolution thumbnail.
This is working fine if I inspect the HTML Code and change the thumbnail url manually.

Is there a way to change the thumbnail url within your component? I was unable to find anything regarding this.

If not: Is there any plan to implement this?

How to turn off related videos option

Hello, i am developing an app using this package. i tested it yesterday and everything was working fine. when i worked on the app again, the player event method suddenly stopped working. other user defined methods is still working properly but the video defined methods just stopped working