<template>
  <div class="modal is-active">
    <div class="modal-background" @click="$emit('close')" />
    <div class="modal-card">
      <section class="modal-card-body">
        <iframe
          v-if="url"
          :id="`ytplayer-${iframeId}`"
          type="text/html"
          width="640"
          height="360"
          :src="url"
          frameborder="0"
        />
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  iframeId: {
    type: String,
    default: () => (Math.random() + 1).toString(36).substring(7),
  },
  url: { type: String, default: "" },
})
defineEmits(["close"])
</script>

<style scoped lang="sass">
.modal-card
  width: fit-content
</style>
