From 420f4c4a3bfc187c7cb791bd7fde71a0da86b58c Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 14 Jul 2025 19:58:08 +0200
Subject: [PATCH] Add youtube video

---
 ui/src/App.tsx           |  2 +-
 ui/src/pages/landing.tsx | 24 +++++++++---------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 3278326..a0275ed 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -39,7 +39,7 @@ export const App = () => {
               className={twMerge(
                 "min-h-screen",
                 !isProd ? "bg-orange-50" : "bg-white",
-                !isProd ? "dark:bg-orange-950" : "dark:bg-gray-900"
+                "dark:bg-gray-900"
               )}
             >
               <Routes>
diff --git a/ui/src/pages/landing.tsx b/ui/src/pages/landing.tsx
index bc1f68a..4466cf4 100644
--- a/ui/src/pages/landing.tsx
+++ b/ui/src/pages/landing.tsx
@@ -79,25 +79,19 @@ export const LandingPage = () => {
           </div>
           <div
             className={twMerge(
-              "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
-              "shadow-xl border border-blue-200 dark:border-slate-700/50",
+              "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
+              "shadow-xl",
               "relative"
             )}
           >
-            <video
+            <iframe
               className="aspect-video rounded-lg w-full"
-              controls
-              poster="/api/placeholder/800/450"
-              preload="metadata"
-            >
-              <source src="/videos/xtablo-demo.mp4" type="video/mp4" />
-              <source src="/videos/xtablo-demo.webm" type="video/webm" />
-              <div className="aspect-video rounded-lg bg-blue-100 dark:bg-slate-700/50 flex items-center justify-center">
-                <p className="text-slate-600 dark:text-slate-400">
-                  Votre navigateur ne supporte pas la lecture vidéo.
-                </p>
-              </div>
-            </video>
+              src="https://www.youtube.com/embed/1-UlzZQ0lMw"
+              title="XTablo Demo"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            ></iframe>
           </div>
         </section>
         {/* Problem Section */}