diff --git a/docs/assets/sample/test.png b/docs/assets/sample/test.png
new file mode 100644
index 000000000..c591106f6
Binary files /dev/null and b/docs/assets/sample/test.png differ
diff --git a/docs/mobile.html b/docs/mobile.html
index 7d1c0ffdc..e6711b28d 100644
--- a/docs/mobile.html
+++ b/docs/mobile.html
@@ -155,7 +155,7 @@
                     beforeEmit: (danmu) => !!danmu.text.trim(),
                 }),
                 artplayerPluginAds({
-                    video: '/assets/sample/test1.mp4',
+                    html: '<img src="/assets/sample/test.png"></img>',
                     playDuration: 5,
                     totalDuration: 10,
                 }),
diff --git a/docs/uncompiled/artplayer-plugin-ads/index.js b/docs/uncompiled/artplayer-plugin-ads/index.js
index b8275bd41..8eb9d9e95 100644
--- a/docs/uncompiled/artplayer-plugin-ads/index.js
+++ b/docs/uncompiled/artplayer-plugin-ads/index.js
@@ -324,7 +324,7 @@ if (typeof document !== "undefined") {
 if (typeof window !== "undefined") window["artplayerPluginAds"] = artplayerPluginAds;
 
 },{"bundle-text:./style.less":"1ZB0H","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"1ZB0H":[function(require,module,exports) {
-module.exports = ".artplayer-plugin-ads {\n  z-index: 150;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  background-color: #000;\n  font-size: 13px;\n  line-height: 1;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n  width: 100%;\n  height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n  display: none;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n  cursor: pointer;\n  background-color: #000000bf;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n  display: none;\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n  cursor: pointer;\n  background-color: #000000bf;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-loading {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0;\n}\n\n";
+module.exports = ".artplayer-plugin-ads {\n  z-index: 150;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  background-color: #000;\n  font-size: 13px;\n  line-height: 1;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n  width: 100%;\n  height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n  display: none;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n  cursor: pointer;\n  background-color: #00000080;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n  display: none;\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n  cursor: pointer;\n  background-color: #00000080;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-loading {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0;\n}\n\n";
 
 },{}],"8MjWm":[function(require,module,exports) {
 exports.interopDefault = function(a) {
diff --git a/packages/artplayer-plugin-ads/src/style.less b/packages/artplayer-plugin-ads/src/style.less
index 6d1d0c147..c67c6a35c 100644
--- a/packages/artplayer-plugin-ads/src/style.less
+++ b/packages/artplayer-plugin-ads/src/style.less
@@ -35,7 +35,7 @@
         & > div {
             display: flex;
             align-items: center;
-            background-color: rgb(0 0 0 / 75%);
+            background-color: rgb(0 0 0 / 50%);
             border-radius: 15px;
             margin-left: 5px;
             padding: 5px 10px;
@@ -52,7 +52,7 @@
         & > div {
             display: flex;
             align-items: center;
-            background-color: rgb(0 0 0 / 75%);
+            background-color: rgb(0 0 0 / 50%);
             border-radius: 15px;
             margin-left: 5px;
             padding: 5px 10px;