diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index c2a434f94c..1908e14d82 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -26,6 +26,7 @@
       :element="config"
       :search-count="searchCount"
       :h="config.style.height"
+      :edit-mode="'preview'"
     />
   </div>
 </template>
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 19dd595701..7e1b0aea74 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -4,7 +4,7 @@
       <video-player
         ref="videoPlayer"
         class="vjs-custom-skin"
-        :options="playerOptions"
+        :options="editMode==='preview'?pOption:playerOptions"
         :playsinline="true"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
@@ -45,7 +45,7 @@ export default {
     editMode: {
       type: String,
       require: false,
-      default: 'preview'
+      default: 'edit'
     },
     active: {
       type: Boolean,
@@ -59,8 +59,13 @@ export default {
   },
   data() {
     return {
+      pOption: {}
     }
   },
+  created() {
+    this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
+    this.pOption.height = this.h - (this.curGap * 2)
+  },
   computed: {
     moveFlag() {
       return (this.element.optStatus.dragging || this.element.optStatus.resizing)