Revert Video rewrite because still doesn't work in Mobile Safari

Works in simulator but not the real iPhone

src/components/status.jsx

@@ -29,7 +29,6 @@ import visibilityIconsMap from '../utils/visibility-icons-map';
 import Avatar from './avatar';
 import Icon from './icon';
 import RelativeTime from './relative-time';
-import Video from './video';
 
 function fetchAccount(id) {
   return masto.v1.accounts.fetch(id);
@@ -796,17 +795,27 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
         }}
       >
         {showOriginal || autoAnimate ? (
-          <Video
+          <div
-            src={url}
+            style={{
-            poster={previewUrl}
+              width: '100%',
-            width={width}
+              height: '100%',
-            height={height}
+            }}
+            dangerouslySetInnerHTML={{
+              __html: `
+              <video
+                src="${url}"
+                poster="${previewUrl}"
+                width="${width}"
+                height="${height}"
                 preload="auto"
                 autoplay
-            muted={isGIF}
+                muted="${isGIF}"
-            controls={!isGIF}
+                ${isGIF ? '' : 'controls'}
                 playsinline
-            loop={loopable}
+                loop="${loopable}"
+              ></video>
+            `,
+            }}
           />
         ) : isGIF ? (
           <video

src/components/video.jsx

@@ -1,17 +0,0 @@
-// Video component but allow muted attribute to be set
-import { useEffect, useRef } from 'react';
-
-function Video({ muted, autoplay, ...props }) {
-  const videoRef = useRef();
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.setAttribute('muted', muted);
-      videoRef.current.setAttribute('autoplay', autoplay);
-      videoRef.current.play();
-    }
-  }, [muted]);
-
-  return <video ref={videoRef} {...props} />;
-}
-
-export default Video;