<template>
  <div class="iframe_item fullwidth" :style="'height:'+_height+'px'">
    <Img :src="_imageSrc" :width="_width" :height="_height" v-if="!showVideo" />
    <div class="iframe_item_overlay fullwidth" @click="loadVideo()" v-if="!showVideo"><i class="fas fa-play"></i></div>
    <iframe :width="_width" :height="_height" :src="'https://www.youtube.com/embed/'+youtubeVideoId+'?autoplay=1'" frameborder="0" allowfullscreen v-if="showVideo"></iframe>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Video',
  props: {
    youtubeVideoId: String,
    imageSrc: String,
    width: Number,
    height: Number
  },
  data() {
    return {
        showVideo: false
    }
  },
  methods: {
    loadVideo() {
        this.$data['showVideo'] = true
    }
  },
  computed: {
    _width() {
        return this.width
    },
    _height() {
        return this.height
    },
    _imageSrc() {
        return this.imageSrc
    },
    _youtubeVideoId() {
        return this.youtubeVideoId
    },
  }
})
</script>

<style lang="scss">
.iframe_item{ position: relative; cursor: pointer;
  .iframe_item_overlay{ position: absolute; top: 0; left: 0; z-index: 5; height: 100%; text-align: center;
    i{ display: block; width: 100%; color: #fff;}
  }
}
.wrapper {
  position: relative
}
.wrapper > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper > iframe.loading {
  width: 0%;
  height: 0%;
}
</style>