<template>
  <div class="mb-5">
    <div class="text-h5 mb-2">
      <span>{{ video.title }}</span>
    </div>
    <div class="vimeoPlayer"></div>
  </div>
</template>

<script>
import Player from '@vimeo/player'

export default {
  name: "VimeoPlayer",
  props: ['video'],
  data() {
    return {
      player: null
    }
  },
  methods: {
    install() {
      this.player = new Player( this.$el, {
        // https://developer.vimeo.com/player/sdk/embed
        id: this.video.id,
        width: 640,
        byline: false,
        portrait: false,
        color: 'F29829',
        dnt: true,
        title: false,
        playsInline: false,
      })
    }
  },
  mounted() {
    this.install()
  }
}
</script>

<style scoped>

</style>