diff --git a/web/components/landingpage/effect/elevated-video-player/index.tsx b/web/components/landingpage/effect/elevated-video-player/index.tsx
index 488cc96c..0e2c3517 100644
--- a/web/components/landingpage/effect/elevated-video-player/index.tsx
+++ b/web/components/landingpage/effect/elevated-video-player/index.tsx
@@ -66,7 +66,7 @@ function ElevatedVideoPlayer() {
     <Frame style={{ scale }}>
       <div className="youtube-thumbnail">
         <ReactPlayer
-          url={require("public/videos/promotion-video-preview.fast.webm")}
+          url={require("public/videos/promotion-video-preview.fast.mp4")}
           loop
           playing={!actualVideoPlaying}
           muted
diff --git a/web/components/landingpage/motion/live-design-demo/index.tsx b/web/components/landingpage/motion/live-design-demo/index.tsx
index a22a9b38..cd82ef4f 100644
--- a/web/components/landingpage/motion/live-design-demo/index.tsx
+++ b/web/components/landingpage/motion/live-design-demo/index.tsx
@@ -42,11 +42,23 @@ export default function LiveDesignDemoFrame() {
           }
         }}
       /> */}
-      <ReactPlayer
-        url={require("public/videos/landingpage-section2-live-design-demo.min.webm")}
+
+      {/* READ ./ios-15-safari-video-issue.md */}
+      {/* https://github.com/cookpete/react-player/issues/1344 */}
+      <video
+        src={require("public/videos/landingpage-section2-live-design-demo.min.mp4")}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="auto"
+      />
+      {/* <ReactPlayer
+        url={require("public/videos/landingpage-section2-live-design-demo.min.mp4")}
         loop
         playing
         muted
+        playsinline
         config={{
           file: {
             attributes: {
@@ -54,7 +66,7 @@ export default function LiveDesignDemoFrame() {
             },
           },
         }}
-      />
+      /> */}
     </DesignFramePreview>
   );
 }
diff --git a/web/components/landingpage/motion/live-design-demo/ios-15-safari-video-issue.md b/web/components/landingpage/motion/live-design-demo/ios-15-safari-video-issue.md
new file mode 100644
index 00000000..ee8ea30e
--- /dev/null
+++ b/web/components/landingpage/motion/live-design-demo/ios-15-safari-video-issue.md
@@ -0,0 +1,40 @@
+## Why use html5 video instead of react-player in this place?
+
+_This document is explaining how to use pure HTML5 video instead of react-player, which is the video player used in the project only in the live-design-demo section._
+
+While updating to ios 15 version, some video stuttering in safari was found. For example, let's say you are using the tag below.
+
+```typescript
+<ReactPlayer
+  url={require("public/videos/video.mp4")}
+  loop
+  playing
+  muted
+  playsinline
+  config={{
+    file: {
+      attributes: {
+        preload: "auto",
+      },
+    },
+  }}
+/>
+```
+
+All use the same code as in the example, except for the url, but it has been confirmed that the problem occurs only in the specific location _(the video play only when the video is not visible on the screen)_.
+
+I've tried several tests, such as changing the parent's position, but it's still there. But when I used the video tag in pure html5 there was no problem.
+Below is an example used.
+
+```typescript
+<video
+  src={require("public/videos/video.mp4")}
+  autoPlay
+  muted
+  loop
+  playsInline
+  preload="auto"
+/>
+```
+
+So, until the video problem is stable in ios 15 safari, the problematic video from `live-design-demo` is replaced with pure html5 `video` tag.
diff --git a/web/public/videos/landingpage-section2-live-design-demo.min.mp4 b/web/public/videos/landingpage-section2-live-design-demo.min.mp4
new file mode 100644
index 00000000..910843ec
Binary files /dev/null and b/web/public/videos/landingpage-section2-live-design-demo.min.mp4 differ
diff --git a/web/public/videos/landingpage-section2-live-design-demo.min.webm b/web/public/videos/landingpage-section2-live-design-demo.min.webm
deleted file mode 100644
index a7149b2a..00000000
Binary files a/web/public/videos/landingpage-section2-live-design-demo.min.webm and /dev/null differ
diff --git a/web/public/videos/landingpage-section2-live-design-demo.mp4 b/web/public/videos/landingpage-section2-live-design-demo.mp4
new file mode 100644
index 00000000..4634cf60
Binary files /dev/null and b/web/public/videos/landingpage-section2-live-design-demo.mp4 differ
diff --git a/web/public/videos/promotion-video-preview.fast.mp4 b/web/public/videos/promotion-video-preview.fast.mp4
new file mode 100644
index 00000000..d35e575c
Binary files /dev/null and b/web/public/videos/promotion-video-preview.fast.mp4 differ
diff --git a/web/public/videos/promotion-video-preview.fast.webm b/web/public/videos/promotion-video-preview.fast.webm
deleted file mode 100644
index d474024b..00000000
Binary files a/web/public/videos/promotion-video-preview.fast.webm and /dev/null differ
diff --git a/web/public/videos/promotion-video-preview.mp4 b/web/public/videos/promotion-video-preview.mp4
new file mode 100644
index 00000000..6603ddbd
Binary files /dev/null and b/web/public/videos/promotion-video-preview.mp4 differ
diff --git a/web/public/videos/your-design-is-your-code.min.mp4 b/web/public/videos/your-design-is-your-code.min.mp4
new file mode 100644
index 00000000..8596943e
Binary files /dev/null and b/web/public/videos/your-design-is-your-code.min.mp4 differ
diff --git a/web/public/videos/your-design-is-your-code.mp4 b/web/public/videos/your-design-is-your-code.mp4
new file mode 100644
index 00000000..ac8c61cd
Binary files /dev/null and b/web/public/videos/your-design-is-your-code.mp4 differ
diff --git a/web/public/videos/your-design-is-your-git.min.mp4 b/web/public/videos/your-design-is-your-git.min.mp4
new file mode 100644
index 00000000..c824f86b
Binary files /dev/null and b/web/public/videos/your-design-is-your-git.min.mp4 differ
diff --git a/web/public/videos/your-design-is-your-git.mp4 b/web/public/videos/your-design-is-your-git.mp4
new file mode 100644
index 00000000..90682d13
Binary files /dev/null and b/web/public/videos/your-design-is-your-git.mp4 differ
diff --git a/web/public/videos/your-design-is-your-git.webm b/web/public/videos/your-design-is-your-git.webm
deleted file mode 100644
index 5d93b969..00000000
Binary files a/web/public/videos/your-design-is-your-git.webm and /dev/null differ
diff --git a/web/public/videos/your-design-is-your-transation.min.mp4 b/web/public/videos/your-design-is-your-transation.min.mp4
new file mode 100644
index 00000000..94f1eb0e
Binary files /dev/null and b/web/public/videos/your-design-is-your-transation.min.mp4 differ
diff --git a/web/public/videos/your-design-is-your-code.webm b/web/public/videos/your-design-is-your-transation.mp4
similarity index 58%
rename from web/public/videos/your-design-is-your-code.webm
rename to web/public/videos/your-design-is-your-transation.mp4
index 0a1f7676..6901b53d 100644
Binary files a/web/public/videos/your-design-is-your-code.webm and b/web/public/videos/your-design-is-your-transation.mp4 differ
diff --git a/web/public/videos/your-design-is-your-transation.webm b/web/public/videos/your-design-is-your-transation.webm
deleted file mode 100644
index 61c0c188..00000000
Binary files a/web/public/videos/your-design-is-your-transation.webm and /dev/null differ
diff --git a/web/sections/landingpage/products/index.tsx b/web/sections/landingpage/products/index.tsx
index a301e685..0976154c 100644
--- a/web/sections/landingpage/products/index.tsx
+++ b/web/sections/landingpage/products/index.tsx
@@ -123,6 +123,7 @@ const Products = () => {
             loop
             playing
             muted
+            playsinline
             config={{
               file: {
                 attributes: {
diff --git a/web/utils/landingpage/constants.ts b/web/utils/landingpage/constants.ts
index b15cb05e..a84b3c1e 100644
--- a/web/utils/landingpage/constants.ts
+++ b/web/utils/landingpage/constants.ts
@@ -62,7 +62,7 @@ export const PRODUCT_LIST = [
       "With powerful Design2Code Engine, Grida generates production ready code that can also easily be used for existing projects. Supprt for components, various code styles, naming conventions and fille/directory structures are supported.",
     gradient: "linear-gradient(99.57deg, #6268FF 0%, #9039FF 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-code.webm"),
+    path: require("public/videos/your-design-is-your-code.mp4"),
   },
   // {
   // title: "server",
@@ -77,7 +77,7 @@ export const PRODUCT_LIST = [
       "Intuitive content management for your app. Translations support is included. No more excel based text managin tools - we all know that just doesn’t work. With Bridged Globalization, translate where your deisgns are at and update your contents with no update time. Go live with a click.",
     gradient: "linear-gradient(99.57deg, #FBA33C 0%, #FFC700 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-transation.webm"),
+    path: require("public/videos/your-design-is-your-transation.mp4"),
   },
   // {
   //     title: "insight",
@@ -93,7 +93,7 @@ export const PRODUCT_LIST = [
       "Built-in git support enables you to integrate your design as a pure component into your existing project. Experience all-in-sync workflow. Keep your code synced as a design. Finally, the code generation tool that supports git.",
     gradient: "linear-gradient(99.57deg, #0E1279 0%, #632655 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-git.webm"),
+    path: require("public/videos/your-design-is-your-git.mp4"),
   },
   //  {
   //     title: "everything",