Vue Youtube embed

XXX-youtube-embed.vue

<template>
  <div class="youtube" :class="{'youtube--show': noframed}">
    <youtube :video-id='id' @ready="ready"></youtube>
  </div>
</template>

<script>
import { getIdFromURL } from 'vue-youtube-embed'
import noframe from 'reframe.js'

export default {
  name: 'bac-youtube-embed',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      noframed: false,
      iframe: ''
    }
  },
  computed: {
    id() {
      return getIdFromURL(this.url)
    }
  },
  methods: {
    ready (player) {
      this.iframe = player.getIframe()
      if (!this.noframed) {
        noframe(this.iframe)
        this.noframed = true
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.youtube {
  width: 100%;
  opacity: 0;
  text-align: center;

  &::after {
    content: 'retrieving video';
  }

  &--show {
    opacity: 1;

    &::after {
      content: '';
    }
  }
}
</style>