Merge pull request #6 from deco-sites/danielfurt/activation-form

fix: render videos as native JSX for mobile autoplay

Author: danielfurt

sections/ActivationForm.tsx

@@ -174,20 +174,35 @@ export default function ActivationForm({
   return (
     <div class="relative h-screen overflow-hidden flex flex-col" style="background-color: #1D1B1D;">
       <div class="absolute inset-0 z-0" style="background: linear-gradient(180deg, #1D1B1D 0%, #2a2528 50%, #1D1B1D 100%);">
-        <div id="bg-video-container" class="absolute inset-0 opacity-0" style="transition: opacity 1s ease-out;" dangerouslySetInnerHTML={{ __html: `
-          <video autoplay muted loop playsinline style="width: 100%; height: 100%; object-fit: cover; opacity: 0.3;">
+        <div id="bg-video-container" class="absolute inset-0 opacity-0" style="transition: opacity 1s ease-out;">
+          <video
+            class="w-full h-full object-cover"
+            autoplay
+            muted
+            loop
+            playsinline
+            poster=""
+            style="opacity: 0.3;"
+          >
             <source src="https://assets.decocache.com/deriva-earth/63f76078-d3d8-46e9-8f55-bafe3c32fa6b/background2_header-(1)-(1).mp4" type="video/mp4" />
           </video>
-        `}} />
+        </div>
       </div>
 
       {/* Loading screen */}
       <div id="loading-screen" class="absolute inset-0 z-50 flex items-center justify-center" style="background-color: #1D1B1D;">
-        <div id="loading-video-container" class="h-40 lg:h-48" dangerouslySetInnerHTML={{ __html: `
-          <video id="loading-video" autoplay muted playsinline style="height: 100%; width: auto; mix-blend-mode: screen;">
+        <div class="h-40 lg:h-48" style="mix-blend-mode: screen;">
+          <video
+            id="loading-video"
+            class="h-full w-auto"
+            autoplay
+            muted
+            playsinline
+            poster=""
+          >
             <source src="https://assets.decocache.com/deriva-earth/d192798e-7bb1-475b-b79d-2622051e839b/animation.mp4" type="video/mp4" />
           </video>
-        `}} />
+        </div>
       </div>
 
       <style dangerouslySetInnerHTML={{ __html: `