diff --git a/demo/index.html b/demo/index.html
index 001ff575f..d4eb9d62f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,7 +23,10 @@ <h2 id="quick-start">Quick Start</h2>
                 },
                 danmaku: {
                     id: '9E2E3368B56CDBB4',
-                    api: 'https://api.prprpr.me/dplayer/'
+                    api: 'https://api.prprpr.me/dplayer/',
+                    margin: {
+                        bottom:'15%'
+                    }
                 }
             });
         </script>
diff --git a/src/html.js b/src/html.js
index 8ed39cab7..124e55933 100644
--- a/src/html.js
+++ b/src/html.js
@@ -13,7 +13,7 @@ const html = {
             ${option.logo ? `
             <div class="dplayer-logo"><img src="${option.logo}"></div>
             ` : ``}
-            <div class="dplayer-danmaku">
+            <div class="dplayer-danmaku" style="${option.danmaku ? html.danmakumargin(option.danmaku.margin) : ``}">
                 <div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
             </div>
             <div class="dplayer-bezel">
@@ -174,6 +174,16 @@ const html = {
         <div class="dplayer-notice"></div>`;
     },
 
+    danmakumargin: (margin) => {
+        let result = '';
+        if (margin) {
+            for (const key in margin) {
+                result += `${key}:${margin[key]};`;
+            }
+        }
+        return result;
+    },
+
     contextmenuList: (contextmenu) => {
         let result = '<div class="dplayer-menu">';
         for (let i = 0; i < contextmenu.length; i++) {