From b344bec683981580e27000a947009050aaa4c213 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 26 Sep 2025 23:39:16 +0200
Subject: [PATCH 1/2] render videos in md

---
 apps/learneth/src/pages/StepDetail/index.tsx | 37 +++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/learneth/src/pages/StepDetail/index.tsx b/apps/learneth/src/pages/StepDetail/index.tsx
index d0a6e7eb846..141bc25d915 100644
--- a/apps/learneth/src/pages/StepDetail/index.tsx
+++ b/apps/learneth/src/pages/StepDetail/index.tsx
@@ -72,6 +72,39 @@ function StepDetailPage() {
     )
   }
 
+  const VideoRenderer = ({
+    node,
+    src,
+    alt,
+    ...props
+  }: {
+    node?: any;
+    src?: string;
+    alt?: string;
+    [key: string]: any;
+  }) => {
+    if (alt === 'youtube') {
+      /*
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/Eh1qgOurDxU?si=lz1JypmIJZ15OY4g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      */
+      return (
+        <iframe
+          /*width="560"
+          height="315"*/
+          src={src}
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      );
+    }
+    if (alt === 'video') {
+      return <video controls src={src} style={{ maxWidth: '100%' }} />;
+    }
+    return <img src={src} alt={alt} {...props} />;
+  };
+
   return (
     <div className='pb-4'>
       <div className="fixed-top">
@@ -104,7 +137,9 @@ function StepDetailPage() {
         </>
       )}
       <div className="container-fluid">
-        <Markdown rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
+        <Markdown components={{
+        img: VideoRenderer
+      }} rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
       </div>
       {clonedStep.test?.content ? (
         <>

From 2a1b4deed91b99f6a9e8ed9100c7d115e53f879a Mon Sep 17 00:00:00 2001
From: ci-bot <ci-bot@remix-project.org>
Date: Tue, 30 Sep 2025 11:08:21 +0100
Subject: [PATCH 2/2] fix aspect ratio for learnEth Video

---
 apps/learneth/src/pages/StepDetail/index.tsx | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/learneth/src/pages/StepDetail/index.tsx b/apps/learneth/src/pages/StepDetail/index.tsx
index 141bc25d915..a76cf3ec6cf 100644
--- a/apps/learneth/src/pages/StepDetail/index.tsx
+++ b/apps/learneth/src/pages/StepDetail/index.tsx
@@ -88,15 +88,16 @@ function StepDetailPage() {
         <iframe width="560" height="315" src="https://www.youtube.com/embed/Eh1qgOurDxU?si=lz1JypmIJZ15OY4g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       */
       return (
-        <iframe
-          /*width="560"
-          height="315"*/
-          src={src}
-          title="YouTube video player"
-          frameBorder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        />
+        <div className="position-relative overflow-hidden" style={{ paddingBottom: '56.25%', maxWidth: '100%', height: '0' }}>
+          <iframe
+            style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}
+            src={src}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </div>
       );
     }
     if (alt === 'video') {
@@ -137,9 +138,7 @@ function StepDetailPage() {
         </>
       )}
       <div className="container-fluid">
-        <Markdown components={{
-        img: VideoRenderer
-      }} rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
+        <Markdown components={{ img:VideoRenderer }} rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
       </div>
       {clonedStep.test?.content ? (
         <>