Fix for videos in mobile browsers (#189)

* Match X embed attributes for video * check that the video loaded before playing * Undo the last change
vercel · Feb 24, 2025 · e5798c3 · e5798c3
1 parent 3367f07
commit e5798c3
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx b/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
@@ -3,7 +3,12 @@
 import { useState } from 'react'
 import clsx from 'clsx'
 import type { MediaAnimatedGif, MediaVideo } from '../api/index.js'
-import { EnrichedQuotedTweet, type EnrichedTweet, getMediaUrl, getMp4Video } from '../utils.js'
+import {
+  EnrichedQuotedTweet,
+  type EnrichedTweet,
+  getMediaUrl,
+  getMp4Video,
+} from '../utils.js'
 import mediaStyles from './tweet-media.module.css'
 import s from './tweet-media-video.module.css'
 
@@ -25,7 +30,7 @@ export const TweetMediaVideo = ({ tweet, media }: Props) => {
         className={mediaStyles.image}
         poster={getMediaUrl(media, 'small')}
         controls={!playButton}
-        muted
+        playsInline
         preload="none"
         tabIndex={playButton ? -1 : 0}
         onPlay={() => {
@@ -59,9 +64,18 @@ export const TweetMediaVideo = ({ tweet, media }: Props) => {
 
             e.preventDefault()
             setPlayButton(false)
-            setIsPlaying(true)
-            video.play()
-            video.focus()
+            video.load()
+            video
+              .play()
+              .then(() => {
+                setIsPlaying(true)
+                video.focus()
+              })
+              .catch((error) => {
+                console.error('Error playing video:', error)
+                setPlayButton(true)
+                setIsPlaying(false)
+              })
           }}
         >
           <svg