<template>
  <iframe
    :src="`https://www.youtube.com/embed/${videoId}`"
    class="youtube-embed"
    type="text/html"
    rel="0"
    frameborder="0"
    id="ytplayer"/>
</template>

<script>
  import {getVideoId} from '@/helpers/video';

  export default {
    props: ['url'],

    computed: {
      videoId() {
        return getVideoId(this.url);
      }
    }
  };
</script>

<style scoped lang="scss">
  .youtube-embed {
    width: 100%;
    height: 350px;
  }
</style>
