v-if and vue-youtube

[manniL]

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>

[anteriovieira]

Sorry for the delay, I'm working in the solution.

[anteriovieira]

Code for your example https://codesandbox.io/s/j2kjy88zov

[manniL]

Thank you :relaxed: