Simple Vue Video Embed

simpleVueVideoEmbed

<template lang="pug">
.vimeoEmbed__wrapper
  p.vimeoEmbed__p
    | These partners have achieved real results by adding security solutions to their stack with Pax8. Tap on a hexagon to experience their stories, or watch a video below.
  .vimeoEmbed__wrapper--inner
    iframe.vimeoEmbed__iframe(:src="$store.state.videosFeatured[$store.state.cOb.slug].vidURL" frameborder="0"  width="384" height="216")
    .vimeoEmbed__filmstrip
      img.vimeoEmbed__thumb(v-for="(vid, index) in $store.state.videosFeatured[$store.state.cOb.slug].vids" tabindex="0" role="button" loading="lazy" decoding="async" width="112" height="63" :src="`${vid.srcThumb}`" :alt="`link to video ${index}`" @click="featureMe(vid)")

</template>

<script>
export default {
  name: 'VideoPlayer',
  methods: {
    featureMe(vid) {
      this.$store.commit('setVideoFeatured', {
        cat: this.$store.state.cOb.slug,
        vidURL: vid.srcVideo,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.vimeoEmbed {
  &__wrapper {
    position: absolute;
    top: $modal-offset--top + 24px;
    left: 50%;
    width: 432px;
    transform: translateX(-50%);
    &--inner {
      background: rgba(0, 0, 0, 0.6);
      //vidHeight + padding + thumbheight
      height: 354px;
      border-radius: 10px;
      padding: 24px;
    }
  }
  &__p {
    margin: 0;
    padding-bottom: 2em;
  }
  &__iframe {
    outline: solid 2px $teal;
    background-color: #000;
  }
  &__filmstrip {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    padding: 24px;
    // maybe scroll
    overflow: hidden;
    white-space: nowrap;
  }
  &__thumb {
    display: none;
    //width: 33.3333%;
    outline: 2px solid $teal;
    object-fit: cover;
    // will show the most recent 3
    &:nth-last-child(1),
    &:nth-last-child(2),
    &:nth-last-child(3) {
      display: inline-flex;
    }
  }
}
</style>