Optionally load player only after clicking on a preview image

[Sopamo]

I'm using vue-youtube-embed in quite a few projects now, thanks for the great work!

I'm currently working on an application for mobile devices where I want to display multiple (10+) videos on one page, but the performance is really bad, especially on low end devices.
I'd suggest adding an option where only an image tag with the preview image is loaded at first and after the user clicks on the image the real player is loaded and plays the video.
If you want I can implement the functionality and submit a pull request.

[kaorun343]

Thanks for using this library 😄

Your suggestion sounds nice to me.
However, writing like this is not so hard for users, I think.

(I haven't tested this code whether it works well or not.)

<template>
  <img v-if="!clicked" src="preview-image.png" @click="clicked=true">
  <youtube v-else :video-id="videoId"></youtube>
</template>

<script>
export default {
  name: 'Wrapper',
  data () {
    return {
      clicked: false
    }
  },
  props: {
    videoId: String
  }
}
</script>

[Sopamo]

Sure thing, but I'd need an extra component for that and as this could be a recurring problem I'd think it would fit great into this library, something like <youtube :preview="true"></youtube>

[kaorun343]

OK, I see. 👍
I'm looking forward to receive a PR from you. 😃

[Sopamo]

I now started implementing the feature here: https://github.com/Sopamo/vue-youtube-embed/tree/add-preview-mode
The basic functionality works, I'm planning to add some tests and make the preview mode a bit more fancy :)

[kaorun343]

I'll close this because of inactivity.