diff --git a/apps/core/.webpack/config.ts b/apps/core/.webpack/config.ts
index d5e9c646f4..2fa965a899 100644
--- a/apps/core/.webpack/config.ts
+++ b/apps/core/.webpack/config.ts
@@ -291,7 +291,7 @@ export const createConfiguration: (
               exclude: [/node_modules/],
             },
             {
-              test: /\.(png|jpg|gif|svg|webp)$/,
+              test: /\.(png|jpg|gif|svg|webp|mp4)$/,
               type: 'asset/resource',
             },
             {
diff --git a/apps/storybook/src/stories/notification-center.stories.tsx b/apps/storybook/src/stories/notification-center.stories.tsx
index b3f2fca449..2a98e4f9c5 100644
--- a/apps/storybook/src/stories/notification-center.stories.tsx
+++ b/apps/storybook/src/stories/notification-center.stories.tsx
@@ -17,8 +17,10 @@ export default {
 let id = 0;
 const image = (
   <video autoPlay muted loop>
-    <source src="/editingVideo.mp4" type="video/mp4" />
-    <source src="/editingVideo.webm" type="video/webm" />
+    <source
+      src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+      type="video/mp4"
+    />
   </video>
 );
 export const Basic = () => {
diff --git a/apps/core/public/editingVideo.mp4 b/packages/component/src/components/tour-modal/editingVideo.mp4
similarity index 100%
rename from apps/core/public/editingVideo.mp4
rename to packages/component/src/components/tour-modal/editingVideo.mp4
diff --git a/apps/core/public/switchVideo.mp4 b/packages/component/src/components/tour-modal/switchVideo.mp4
similarity index 100%
rename from apps/core/public/switchVideo.mp4
rename to packages/component/src/components/tour-modal/switchVideo.mp4
diff --git a/packages/component/src/components/tour-modal/tour-modal.tsx b/packages/component/src/components/tour-modal/tour-modal.tsx
index f039d36b37..84e51eced1 100644
--- a/packages/component/src/components/tour-modal/tour-modal.tsx
+++ b/packages/component/src/components/tour-modal/tour-modal.tsx
@@ -1,9 +1,11 @@
+/// <reference types="../../type.d.ts" />
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { Modal, type ModalProps } from '@toeverything/components/modal';
 import clsx from 'clsx';
 import { useState } from 'react';
 
+import editingVideo from './editingVideo.mp4';
 import {
   arrowStyle,
   buttonDisableStyle,
@@ -24,6 +26,7 @@ import {
   videoSlideStyle,
   videoStyle,
 } from './index.css';
+import switchVideo from './switchVideo.mp4';
 
 export const TourModal = (props: ModalProps) => {
   const t = useAFFiNEI18N();
@@ -92,8 +95,7 @@ export const TourModal = (props: ModalProps) => {
                   })}
                   data-testid="onboarding-modal-editing-video"
                 >
-                  <source src="/editingVideo.mp4" type="video/mp4" />
-                  <source src="/editingVideo.webm" type="video/webm" />
+                  <source src={editingVideo} type="video/mp4" />
                 </video>
               )}
               <video
@@ -106,8 +108,7 @@ export const TourModal = (props: ModalProps) => {
                 })}
                 data-testid="onboarding-modal-switch-video"
               >
-                <source src="/switchVideo.mp4" type="video/mp4" />
-                <source src="/switchVideo.webm" type="video/webm" />
+                <source src={switchVideo} type="video/mp4" />
               </video>
             </div>
           </div>
diff --git a/packages/component/src/type.d.ts b/packages/component/src/type.d.ts
new file mode 100644
index 0000000000..e63e171da2
--- /dev/null
+++ b/packages/component/src/type.d.ts
@@ -0,0 +1,4 @@
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
diff --git a/packages/component/tsconfig.json b/packages/component/tsconfig.json
index ffddfded04..d3da6256f7 100644
--- a/packages/component/tsconfig.json
+++ b/packages/component/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "exclude": ["lib"],
-  "include": ["./src/**/*", "./src/**/*.json"],
+  "include": ["./src/**/*", "./src/**/*.json", "./src/type.d.ts"],
   "compilerOptions": {
     "composite": true,
     "noEmit": false,