audi/app/components/block/fullSizeBannerVideo.vue

<template>
  <section
    class="img--section--full"
    :class="mask"
    :data-type="type"
    :data-text-location="textLocation"
  >
    <div :style="{ height: height + 'px' }">
      <video
        :autoplay="true"
        :loop="true"
        :muted="true"
        crossorigin="anonymous"
        controls=""
        playsinline=""
        poster=""
        controlslist="nodownload noplaybackrate"
        disablepictureinpicture=""
        preload="metadata"
        class="VideoPlayer__VideoComponent-sc-72ae48fe-2 dAzSac"
      >
        <source media="(min-width:320px)" :src="videoPath" />
      </video>

      <div class="alt--text" v-if="altText" :style="'color:' + textColor">
        {{ altText }}
      </div>
      <div class="sub--title" v-if="subTitle" :style="'color:' + textColor">
        {{ subTitle }}
      </div>
      <div class="btn--wrapper" v-if="btnText">
        <NuxtLink :to="btnLink" :target="btnTarget" class="default--round--btn">
          {{ btnText }}
        </NuxtLink>

        <NuxtLink
          v-if="btnText2"
          :to="btnLink2"
          :target="btnTarget2"
          class="default--round--btn reverse"
        >
          {{ btnText2 }}
        </NuxtLink>
      </div>
    </div>
    <div v-if="cautionText" class="caution--text--small" v-html="cautionText"></div>
  </section>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    height: {
      type: String,
      default: "100vh",
    },
    videoPath: {
      type: String,
      default: "",
    },
    mask: {
      type: String,
      default: "",
      validator: (value) => ["", "hidden"].includes(value),
    },
    textLocation: {
      type: String,
      default: "bottom",
      validator: (value) => ["bottom", "top", "left", "right"].includes(value),
    },
    textColor: {
      type: String,
      default: "#fff",
      validator: (value) => ["#fff", "#020203"].includes(value),
    },
    cautionText: {
      type: String,
      default: "",
    },
    altText: {
      type: String,
      default: "",
    },
    subTitle: {
      type: String,
      default: "",
    },
    btnText: {
      type: String,
      default: "",
    },
    btnLink: {
      type: String,
      default: "",
    },
    btnTarget: {
      type: String,
      default: "",
    },
    btnText2: {
      type: String,
      default: "",
    },
    btnLink2: {
      type: String,
      default: "",
    },
    btnTarget2: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "contain", // 'horz' , 'vert'
      validator: (value) => ["contain", "cover"].includes(value),
    },
  });
</script>