diff --git a/src/js/controller.js b/src/js/controller.js
index 42968e0..f398891 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -91,7 +91,7 @@ class Controller {
             });
 
             this.player.on('loadedmetadata', () => {
-                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160);
+                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160, this.player.template.barWrap.offsetWidth);
             });
         }
     }
diff --git a/src/js/player.js b/src/js/player.js
index 26e74c1..312c710 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -564,6 +564,9 @@ class DPlayer {
         if (this.danmaku) {
             this.danmaku.resize();
         }
+        if (this.controller.thumbnails) {
+            this.controller.thumbnails.resize(160, this.video.videoHeight / this.video.videoWidth * 160, this.template.barWrap.offsetWidth);
+        }
         this.events.trigger('resize');
     }
 
diff --git a/src/js/thumbnails.js b/src/js/thumbnails.js
index b5de89f..42882ed 100644
--- a/src/js/thumbnails.js
+++ b/src/js/thumbnails.js
@@ -6,10 +6,11 @@ class Thumbnails {
         this.events = options.events;
     }
 
-    resize (width, height) {
+    resize (width, height, barWrapWidth) {
         this.container.style.width = `${width}px`;
         this.container.style.height = `${height}px`;
         this.container.style.top = `${-height + 2}px`;
+        this.barWidth = barWrapWidth;
     }
 
     show () {