diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 3a31a25e44..e9af0c4029 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -84,12 +84,20 @@ export default {
     ])
   },
   created() {
-    this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
-    this.pOption.height = this.h - (this.curGap * 2)
+    this.initOption()
+  },
+  watch: {
+    h(newVal, oldVla) {
+      this.initOption()
+    }
   },
   mounted() {
   },
   methods: {
+    initOption() {
+      this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
+      this.pOption.height = this.h - (this.curGap * 2)
+    },
     // listen event
     onPlayerPlay(player) {
       // console.log('player play!', player)
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 24014a5324..013c5168d7 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -22,7 +22,7 @@
       :style="getComponentStyleDefault(config.style)"
       :is-edit="false"
       :element="config"
-      :h="itemHeight"
+      :h="outItemHeight"
     />
   </div>
 </template>
@@ -53,6 +53,9 @@ export default {
     }
   },
   computed: {
+    outItemHeight() {
+      return this.itemHeight - (4 * this.componentGap)
+    },
     // 移动端编辑组件选择按钮显示
     mobileCheckBarShow() {
       // 显示条件：1.当前是移动端画布编辑状态
@@ -74,7 +77,8 @@ export default {
     },
     ...mapState([
       'mobileLayoutStatus',
-      'componentData'
+      'componentData',
+      'componentGap'
     ])
   },
   methods: {