diff --git a/template/assets/runner.js b/template/assets/runner.js
index 4c52475..2c381c5 100644
--- a/template/assets/runner.js
+++ b/template/assets/runner.js
@@ -1,6 +1,7 @@
 const params = new URLSearchParams(window.location.search);
 var RATIO = 0.618;
 var fps = 60;
+var viewport = Object.assign({}, window.settings.viewport);
 
 if (params.has("fps")) {
     var tmp = parseInt(params.get("fps"));
@@ -85,7 +86,7 @@ window.wallpaperPropertyListener = {
             spinePlayer.setFps(properties.fps);
         }
     },
-    applyUserProperties: function(properties) {
+    applyUserProperties: function (properties) {
         if (properties.logo) {
             if (!properties.logo.value) {
                 document.getElementById("logo").style.display = "none";
@@ -127,7 +128,27 @@ window.wallpaperPropertyListener = {
             }
             document.body.style.backgroundImage = `url(${background})`
         }
-        
+        if (properties.position) {
+            if (!properties.position.value) {
+                spinePlayer.updateViewport(window.settings.viewport)
+            }
+        }
+        if (properties.paddingleft) {
+            viewport.padLeft = `${properties.paddingleft.value}%`
+            spinePlayer.updateViewport(viewport)
+        }
+        if (properties.paddingright) {
+            viewport.padRight = `${properties.paddingright.value}%`
+            spinePlayer.updateViewport(viewport)
+        }
+        if (properties.paddingtop) {
+            viewport.padTop = `${properties.paddingtop.value}%`
+            spinePlayer.updateViewport(viewport)
+        }
+        if (properties.paddingbottom) {
+            viewport.padBottom = `${properties.paddingbottom.value}%`
+            spinePlayer.updateViewport(viewport)
+        }
     },
 };
 
diff --git a/template/assets/spine-player.js b/template/assets/spine-player.js
index 114884f..59c0319 100644
--- a/template/assets/spine-player.js
+++ b/template/assets/spine-player.js
@@ -11317,6 +11317,16 @@ var spine;
 			this.config.fps = value;
 			this.time.setFps(value);
 		};
+		SpinePlayer.prototype.updateViewport = function (viewport) {
+			if (this.loaded) {
+				var _currentViewport = this.currentViewport;
+				_currentViewport.padLeft = this.percentageToWorldUnit(_currentViewport.width, viewport.padLeft);
+				_currentViewport.padRight = this.percentageToWorldUnit(_currentViewport.width, viewport.padRight);
+				_currentViewport.padBottom = this.percentageToWorldUnit(_currentViewport.height, viewport.padBottom);
+				_currentViewport.padTop = this.percentageToWorldUnit(_currentViewport.height, viewport.padTop);
+				this.currentViewport = _currentViewport;
+			}
+		};
 		SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
 		SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);
 		SpinePlayer.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);