vue-youtube

vue-youtube copied to clipboard

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

You can try to use the code below:

computed: {
    ....

    player () {
      return this.$refs.youtube.player
    },

    ....
},

methods: {
    ... 

    youtubeSeekTo () {
      this.player.seekTo(10)
    },

    ...
}

EDIT It seems you need start parameter: https://developers.google.com/youtube/player_parameters#start

.seekTo() isn't quite the same because instead of showing the thumbnail, the youtube player looks like it's stuck in an infinite loading loop until the video is played.

I have the same issue but with the start parameter too.

If I set autoplay=1, and start then it does start at the start time, but its stays paused and shows the loading spinner indefinitely. So that doesn't make much sense but its there.

Has anyone gotten this to successfully work?

Yes, but the workaround was terrible.

Took me a month to make a huge bulky wrapper around the system. The initial hack should be play, pause, then seek. But that's actually way way harder than it sounds because if you do .play() , .pause() then it's too fast and they cancel out and just stay paused. So you have to add a timed delay between the play and the pause, and if your user tries to click play/pause during your timed delay, everything gets wrecked. My workaround went all over the place including an invisible element infront of the player to prevent/catch clicking, and a system to shift focus away from the iframe to catch keystrokes.

To be fair this isn't a Vue YouTube problem. It's a embedded YouTube problem.