<template>
  <div class="component-youtube" :class="`size-${size || 'default'}`">
    <div class="thumb-wrap" v-if="!show" @click.prevent="show = true">
      <div class="ovl">
        <h4 v-if="title">{{title}}</h4>
        <img :src="require('~/assets/icons/play.svg')" alt="" />
      </div>
      <img ref='thumbImg' alt="" class="img"
        :src="thumb || `https://img.youtube.com/vi/${id}/maxresdefault.jpg`"
      />
    </div>
    <iframe v-if="show" :width="iframeWidth" :height="iframeHeight"
      :src="`https://www.youtube.com/embed/${id}?autoplay=1&rel=0`"
      frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
    />
  </div>
</template>

<script>
import './youtube.scss';

import Youtube from './youtube';
export default Youtube;
</script>
