diff --git a/packages/web-app-preview/src/components/Sources/MediaVideo.vue b/packages/web-app-preview/src/components/Sources/MediaVideo.vue
index d595bbf18e1..f79685b425d 100644
--- a/packages/web-app-preview/src/components/Sources/MediaVideo.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaVideo.vue
@@ -6,11 +6,11 @@
     preload="preload"
     :autoplay="isAutoPlayEnabled"
   >
-    <source :src="file.url" :type="file.mimeType" />
+    <source :src="file.url" :type="sourceType" />
   </video>
 </template>
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
 import { CachedFile } from '../../helpers/types'
 
 const { file, isAutoPlayEnabled = true } = defineProps<{
@@ -25,6 +25,16 @@ const resizeVideoDimensions = () => {
   video.value.style.maxWidth = `${stageMedia.offsetWidth - 10}px`
 }
 
+const sourceType = computed(() => {
+  if (file.mimeType === 'video/quicktime') {
+    // QuickTime MOV files often use codecs compatible with MP4 containers,
+    // but browsers do not natively recognize the 'video/quicktime' MIME type for playback.
+    // Using 'video/mp4' as the MIME type improves compatibility with modern browsers.
+    return 'video/mp4'
+  }
+  return file.mimeType
+})
+
 onMounted(() => {
   resizeVideoDimensions()
   window.addEventListener('resize', resizeVideoDimensions)
diff --git a/packages/web-app-preview/src/mimeTypes.ts b/packages/web-app-preview/src/mimeTypes.ts
index 9cb6df6269d..a84c339e116 100644
--- a/packages/web-app-preview/src/mimeTypes.ts
+++ b/packages/web-app-preview/src/mimeTypes.ts
@@ -13,5 +13,6 @@ export const mimeTypes = [
   'image/webp',
   'image/x-ms-bmp',
   'video/mp4',
+  'video/quicktime',
   'video/webm'
 ]