diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css index 3d2822a..e5522ca 100644 --- a/app/static/public/css/video.css +++ b/app/static/public/css/video.css @@ -1066,32 +1066,54 @@ html[data-theme='dark'] .cache-video-item.is-active .cache-video-thumb-wrap { } .edit-preview-wrap { - height: min(52vh, 360px); + position: relative; + width: min(100%, 420px); + margin-left: auto; + margin-right: auto; + height: auto; + aspect-ratio: 9 / 16; max-height: min(52vh, 360px); display: flex; align-items: center; justify-content: center; + contain: layout paint style; + -webkit-transform: translateZ(0); + transform: translateZ(0); } #editVideo { + position: absolute; + inset: 0; width: 100%; height: 100%; max-height: min(52vh, 360px); + object-fit: contain; } .manual-merge-col .edit-preview-wrap { - height: min(40vh, 280px); + position: relative; + width: min(100%, 420px); + margin-left: auto; + margin-right: auto; + height: auto; + aspect-ratio: 9 / 16; max-height: min(40vh, 280px); display: flex; align-items: center; justify-content: center; + contain: layout paint style; + -webkit-transform: translateZ(0); + transform: translateZ(0); } #mergeVideoPreviewA, #mergeVideoPreviewB { + position: absolute; + inset: 0; width: 100%; height: 100%; max-height: min(40vh, 280px); + object-fit: contain; } .manual-merge-grid { diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js index e278f49..22c9ac3 100644 --- a/app/static/public/js/video.js +++ b/app/static/public/js/video.js @@ -128,6 +128,9 @@ videoEl.setAttribute('playsinline', ''); videoEl.setAttribute('webkit-playsinline', ''); videoEl.setAttribute('x5-playsinline', 'true'); + videoEl.style.objectFit = 'contain'; + videoEl.style.maxWidth = '100%'; + videoEl.style.maxHeight = '100%'; } function shortHash(value) {