<template>
  <div class="modal" v-if="showModal">
    <div class="modal__container">
      <iframe src="https://www.youtube.com/embed/S8dmq5YIUoc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="btn-close-modal" @click="closeModal">
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    }
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    }
  }
}
</script>

<style lang="scss">
@import "~assets/sass/module/modal";
</style>

<template>
  <div class="index">
    <div class="btn-youtube" @click="openModal"></div>
    <Modal ref="modal"/>
  </div>
</template>

<script>
import Modal from '~/components/Modal'
export default {
  components: {
    Modal
  },
  methods: {
    openModal() {
      this.$refs.modal.openModal();
    }
  }
}
</script>

.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(238, 238, 239, 0.7);
  &__container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    @include pc-layout{
      width: 560px;
      height: 315px;
    }
    @include sp-layout{
      width: 100%;
      height: 0;
      padding-bottom: (9/16) * 100%;
      background-size: contain;
      display: block;
    }
  }
  iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .btn-close-modal{
    position: absolute;
    top: -60px;
    right: 5px;

    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;

    span:before,
    span:after{
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 84%;
      height: 5%;
      margin: -8% 0 0 -42%;
      background: $main-color;
    }
    span:before{
      transform: rotate(-45deg);
    }
    span:after{
      transform: rotate(45deg);
    }
  }
}