<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>
