add example

Author: kaorun343

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 () {