add example

play/Volume.vue

@@ -0,0 +1,27 @@
+<template lang="html">
+ <container :title="title">
+ <youtube :video-id="videoId" :mute="mute"></youtube>
+ <div>
+ <button @click="mute = !mute">toggle mute</button>
+ </div>
+ <div>{{ mute }}</div>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+
+export default {
+ components: { container },
+ data () {
+ return {
+ title: 'Volume',
+ videoId: 'M7lc1UVf-VE',
+ mute: true
+ }
+ }
+}
+</script>
+
+<style lang="css">
+</style>

play/index.js

@@ -5,10 +5,12 @@ import Size from './Size.vue'
 import PlayerVars from './PlayerVars.vue'
 import UpdateVideoId from './UpdateVideoId.vue'
 import List from './List.vue'
+import Volume from './Volume.vue'
 
 play('Vue YouTube Embed', module)
  .add('Events', Events)
  .add('Height and Width', Size)
  .add('Player Vars', PlayerVars)
  .add('Update Video ID', UpdateVideoId)
  .add('List', List)
+ .add('Volume', Volume)

src/player.js

@@ -5,11 +5,11 @@ let pid = 0
 export default {
  props: {
  playerHeight: {
- type: String,
+ type: [String, Number],
  default: '390'
  },
  playerWidth: {
- type: String,
+ type: [String, Number],
  default: '640'
  },
  playerVars: {
@@ -76,6 +76,7 @@ export default {
  videoId,
  events: {
  onReady: (event) => {
+ this.setMute(this.mute)
  this.$emit('ready', event.target)
  },
  onStateChange: (event) => {
@@ -88,8 +89,6 @@ export default {
  }
  }
  })
-
- this.setMute()
  })
  },
  beforeDestroy () {