Try to fix ios video issues (untested)

mcw0933 · Jan 3, 2023 · c138d68 · c138d68
1 parent 438634a
commit c138d68
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/web/components/onboarding/welcome.tsx b/web/components/onboarding/welcome.tsx
@@ -154,7 +154,8 @@ function Page1() {
         loop
         autoPlay={shouldAutoPlay}
         controls={!shouldAutoPlay}
-        className="my-4 h-full w-full"
+        muted
+        className="hide-video-cast-overlay my-4 h-full w-full"
       >
         <source src="/welcome/mana-example.mp4" type="video/mp4" />
         Your browser does not support video
@@ -213,7 +214,12 @@ export function Page4() {
         <span className="font-semibold">{formatMoney(1000)}</span> to Givewell,
         Manifold sends them <span className="font-semibold">$10 USD</span>.
       </p>
-      <video loop autoPlay className="z-0 h-full w-full">
+      <video
+        loop
+        autoPlay
+        muted
+        className="hide-video-cast-overlay z-0 h-full w-full"
+      >
         <source src="/welcome/charity.mp4" type="video/mp4" />
         Your browser does not support video
       </video>

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -320,6 +320,11 @@ module.exports = {
           'overflow-wrap': 'anywhere',
           'word-break': 'break-word', // for Safari
         },
+        '.hide-video-cast-overlay': {
+          '&::-internal-media-controls-overlay-cast-button': {
+            display: 'none',
+          },
+        },
       })
     }),
   ],