ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionPhotoVideoGallery.vue

<template>
  <v-spacer class="wrapper width-100vw align-center py-7 mb-13 neutrals darken-1" height="100%">
    <v-carousel hide-delimiters class="py-5" width="100%" height="100%">
      <template v-for="(video, idx) in exhibition.videos">
        <v-carousel-item v-if="exhibition.videos.length > 0" :key="'video' + idx">
          <v-row align="center" justify="center">
            <iframe :width="$vuetify.breakpoint.smAndUp ? 640 : 320" :height="$vuetify.breakpoint.smAndUp ? 360 : 180"
              :src="video.VideoLink" title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen>
            </iframe>
          </v-row>
        </v-carousel-item>
      </template>
      <template v-for="(image, index) in exhibition.gallery">
        <v-carousel-item v-if="exhibition.gallery" :key="'image' + index">
          <v-row align="center" justify="center">
            <v-img :src="image.ImageLink" contain :width="$vuetify.breakpoint.smAndUp ? 640 : 320"
              :height="$vuetify.breakpoint.smAndUp ? 360 : 180"></v-img>
          </v-row>
        </v-carousel-item>
      </template>
    </v-carousel>
  </v-spacer>
</template>

<script>
export default {
  name: "ExhibitionPhotoVideoGallery",
  props: {
    exhibition: {
      type: Object,
      default: () => ({
        gallery: {
          videos: [],
          images: [],
        },
      }),
    },
  },
};
</script>

<style lang="scss" scoped>
:deep() {
  .wrapper {
    padding: 0 27px;
  }

  .v-responsive {
    &__content {
      display: flex;
    }
  }

  .v-carousel {
    position: initial;
    padding-left: 20px;
    padding-right: 20px;
  }

  .v-window {
    &__container {
      position: initial;
    }

    &__prev {
      margin: 0;
    }

    &__next {
      margin: 0;
    }
  }
}

iframe {
  width: 100% !important;
  height: 50vw !important;
  min-height: 180px;
}

@media (min-width: 768px) {
  :deep() {
    .wrapper {
      padding: 0 44px;
    }

    .v-window {
      &__prev {
        left: 12px;
      }

      &__next {
        right: 12px;
      }
    }
  }
}

@media (min-width: 1366px) {
  :deep() {
    .wrapper {
      padding: 0 71px;
    }

    .v-window {
      &__prev {
        left: 39px;
      }

      &__next {
        right: 39px;
      }
    }

    iframe {
      width: 640px !important;
      height: 360px !important;
    }
  }
}
</style>