diff --git a/docs/eplayer.js b/docs/eplayer.js
index eb7ce6e..d17a2b3 100644
--- a/docs/eplayer.js
+++ b/docs/eplayer.js
@@ -12,13 +12,14 @@ class Eplayer extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'beatmap']
+    return ['src', 'type', 'beatmap', 'height']
   }
 
   attributeChangedCallback(name, _, newVal) {
     if (name === 'src') this.src = this.$('.video').src = newVal
     if (name === 'type') this.type = newVal
     if (name === 'beatmap') this.beatmap = newVal
+    if (name === 'height') this.height = newVal
     this.stream()
     this.startMug()
     this.video.load()
@@ -36,6 +37,8 @@ class Eplayer extends HTMLElement {
 
   startMug() {
     this.$('.mug').style.display = 'block'
+    this.$('.mug').style.height = this.height + 'px'
+    this.$('.mug').style.width = (this.height / 8 * 5) + 'px'
     this.$('.ep-video').style.display = 'none'
     this.$('.controls').style.display = 'none'
     if (!this.beatmap) return
@@ -436,7 +439,7 @@ class Eplayer extends HTMLElement {
         }
         .mug {
           height: ${this.height}px;
-          width: ${this.height/8*5}px;
+          width: ${this.height / 8 * 5}px;
           position: absolute;
           z-index: 999;
           /* pointer-events: none; */
@@ -448,7 +451,6 @@ class Eplayer extends HTMLElement {
         }
         .wrap{
           position: relative;
-          // height: ${this.height}px;
         }
       </style>
       <div class="wrap">
diff --git a/docs/index.html b/docs/index.html
index 0e0edef..8079795 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -102,12 +102,14 @@
   </style>
   <script>
     setTimeout(() => {
+      document.querySelector('e-player').setAttribute('height', '450')
+
       document.querySelector('e-player').setAttribute('beatmap', '1:2|2:1|3:3|4:4|6:2|6:1|7:3|8:4|8:2|9:1|11:3|12:4|12:2|13:1|14:3|15:4|16:2|16:1|17:3|19:4|19:2|20:1|21:3|22:4')
     }, 1000)
   </script>
   <div class="wrapper">
 
-    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4" height="450">
+    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>