youtube

video.js

<template>
  <section>
    <div class="control section">
      <div class="tags has-addons">
        <span class="tag is-info is-large">Videos</span>
        <span class="tag is-light is-large">for {{ vehicleName }}</span>
      </div>
    </div>

    <div id="videoPlayerPlaceholder">
      <div id="videoPlayer"></div>
    </div>

    <div class="columns is-multiline is-mobile">
      <div class="column is-half" v-for="video in videos">
        <div class="card" v-on:click="playerInit(video)">
          <div class="card-image">
            <figure class="image is-4by3">
              <img :src="video.image" :alt="video.title">
            </figure>
          </div>
          <div class="card-content">
            <div class="title">{{ video.title }}</div>
            <div class="content">{{ video.description }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'Videos',
    props: ['videos', 'vehicleName'],
    data () {
      return {}
    },
    mounted () {
      this.youTubeInit()
    },
    methods: {
      playerInit (video) {
        const videoId = this.getVideoId(video.url)
        document.getElementById('videoPlayerPlaceholder').innerHTML = '<div id="videoPlayer"></div>'
        new YT.Player('videoPlayer', {
          height: '360', width: '100%', videoId: videoId, playerVars: { autoplay: 1, loop: 0, controls: 1, rel: 0 }
        })
      },
      youTubeInit () {
        let tag = document.createElement('script')
        tag.src = 'https://www.youtube.com/player_api'
        let firstScriptTag = document.getElementsByTagName('script')[0]
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
      },
      getVideoId (url) {
        return url.replace('https://www.youtube.com/watch?v=', '')
      }
    }
  }
</script>