Access native YTPlayer events.

[ajarti]

Thanks for a great plugin!

I was wondering how one could access the native iframe YT.Player events, namely "onStateChange". I am looking to track stats on play time and buffering frequency.

Even if the plugin returned a reference to the player instance?

[ajarti]

Hi guys .. any help would be appreciated :)

[andrewvasilchuk]

@ajarti, Hello. Thanks for the issue. I'll handle during this week, and will release a new version.

[ajarti]

That's brilliant @andrewvasilchuk many thanks in advance!

[andrewvasilchuk]

@ajarti, Again, thanks for creating the issue.

Here is how you can create YT.Player instance.

🚨 Don't forget to pass enablejsapi URL parameter

<LazyYoutubeVideo
  src="https://www.youtube.com/embed/4JS70KB9GS0?enablejsapi=1"
  iframe-attributes="iframeAttributes"
  @load:iframe="onIframeLoad"
/>

export default Vue.extend({
  // ...
  data() {
      iframeAttributes: {
        id: 'video',
      },
    }
  },
  methods: {
    onIframeLoad({ iframe }) {
      const id = iframe ? iframe.id : this.iframeAttributes.id
      const instance = new YT.Player(id, {  })
    },
  },
})

P.S Tip fo TS users: there is LoadIframeEventPayload type.

[andrewvasilchuk]

Full example here.

[ajarti]

@andrewvasilchuk You da bomb man .. thanks again.