diff --git a/src/css/index.scss b/src/css/index.scss
index f1a9099..0e99e55 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -8,4 +8,5 @@
 @import './menu';
 @import './notice';
 @import './subtitle';
-@import './video';
\ No newline at end of file
+@import './video';
+@import './info-panel';
\ No newline at end of file
diff --git a/src/css/info-panel.scss b/src/css/info-panel.scss
new file mode 100644
index 0000000..02e4d20
--- /dev/null
+++ b/src/css/info-panel.scss
@@ -0,0 +1,10 @@
+.dplayer-info-panel {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 400px;
+
+    &-hide {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/js/contextmenu.js b/src/js/contextmenu.js
index 0450f19..2a5df48 100644
--- a/src/js/contextmenu.js
+++ b/src/js/contextmenu.js
@@ -6,6 +6,7 @@ class ContextMenu {
             if (this.player.options.contextmenu[index].click) {
                 item.addEventListener('click', () => {
                     this.player.options.contextmenu[index].click(this.player);
+                    this.hide();
                 });
             }
             return item;
diff --git a/src/js/info-panel.js b/src/js/info-panel.js
new file mode 100644
index 0000000..9789209
--- /dev/null
+++ b/src/js/info-panel.js
@@ -0,0 +1,29 @@
+class InfoPanel {
+    constructor (player) {
+        this.container = player.template.infoPanel;
+        this.video = player.video;
+    }
+
+    show () {
+        this.container.classList.remove('dplayer-info-panel-hide');
+    }
+
+    hide () {
+        this.container.classList.add('dplayer-info-panel-hide');
+    }
+
+    triggle () {
+        if (this.container.classList.contains('dplayer-info-panel-hide')) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+
+    update () {
+
+    }
+}
+
+export default InfoPanel;
\ No newline at end of file
diff --git a/src/js/options.js b/src/js/options.js
index 8192b71..edac856 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -124,7 +124,7 @@ export default (options) => {
         {
             text: 'Video info',
             click: (player) => {
-                player.infoPanel.show();
+                player.infoPanel.triggle();
             }
         },
         {
diff --git a/src/js/player.js b/src/js/player.js
index 7f4ae11..732605d 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -18,6 +18,7 @@ import Setting from './setting';
 import Comment from './comment';
 import HotKey from './hotkey';
 import ContextMenu from './contextmenu';
+import InfoPanel from './info-panel';
 
 let index = 0;
 const instances = [];
@@ -131,6 +132,8 @@ class DPlayer {
 
         this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
 
+        this.infoPanel = new InfoPanel(this);
+
         if (!this.danmaku && this.options.autoplay) {
             this.play();
         }
diff --git a/src/js/template.js b/src/js/template.js
index 7572028..f26cf0d 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -66,6 +66,7 @@ class Template {
         this.barPreview = this.container.querySelector('.dplayer-bar-preview');
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
         this.notice = this.container.querySelector('.dplayer-notice');
+        this.infoPanel = this.container.querySelector('.dplayer-info-panel');
     }
 
     tpl (options, index, tran, icons) {
@@ -299,6 +300,7 @@ class Template {
                 </div>
             </div>
         </div>
+        <div class="dplayer-info-panel dplayer-info-panel-hide"></div>
         ${this.tplContextmenuList(options.contextmenu, tran)}
         <div class="dplayer-notice"></div>`;
     }