From 0ed981d7eb574dc47dc643f2ab4cbb84914a15aa Mon Sep 17 00:00:00 2001
From: Shobhan Karthish <91373483+ShobhanKarthish@users.noreply.github.com>
Date: Sat, 5 Sep 2026 09:00:28 +0000
Subject: [PATCH] Fix AbortError when playing tweet videos under Strict Mode

Keep a stable videoRef instead of reading previousSibling after the
play button unmounts, and ignore AbortError from interrupted play().
---
 .../src/twitter-theme/tweet-media-video.tsx         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 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
index db960c0..a27803c 100644
--- a/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
+++ b/packages/react-tweet/src/twitter-theme/tweet-media-video.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import clsx from 'clsx'
 import type { MediaAnimatedGif, MediaVideo } from '../api/index.js'
 import {
@@ -21,12 +21,14 @@ export const TweetMediaVideo = ({ tweet, media }: Props) => {
   const [playButton, setPlayButton] = useState(true)
   const [isPlaying, setIsPlaying] = useState(false)
   const [ended, setEnded] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
   const mp4Video = getMp4Video(media)
   let timeout = 0
 
   return (
     <>
       <video
+        ref={videoRef}
         className={mediaStyles.image}
         poster={getMediaUrl(media, 'small')}
         controls={!playButton}
@@ -60,10 +62,12 @@ export const TweetMediaVideo = ({ tweet, media }: Props) => {
           className={s.videoButton}
           aria-label="View video on X"
           onClick={(e) => {
-            const video = e.currentTarget.previousSibling as HTMLMediaElement
-
             e.preventDefault()
             setPlayButton(false)
+
+            const video = videoRef.current
+            if (!video) return
+
             video.load()
             video
               .play()
@@ -72,6 +76,9 @@ export const TweetMediaVideo = ({ tweet, media }: Props) => {
                 video.focus()
               })
               .catch((error) => {
+                // AbortError is expected when the element is briefly removed
+                // (e.g. React Strict Mode remounts) while play() is in flight.
+                if (error?.name === 'AbortError') return
                 console.error('Error playing video:', error)
                 setPlayButton(true)
                 setIsPlaying(false)