Changing orientation causes video to close when playing HTML5 video on Safari iOS

Question

I'm rendering a video using React and HTML5's tag, and when I open the site on my iPhone, the video plays in the native iOS Safari video player. However, when I change the orientation to watch the video in landscape mode, the video turns off. Do I need to implement some configuration of the HTML5 video tag? Or is this a problem with my React rendering?

For better understanding, I am developing an algorithm visualizer, which is not supported on mobile devices at the moment. So I use some media queries to display a modal that tells the user to use a larger screen when opening the page on a mobile device. In the modal I have a demo video of the website, so I want people to be able to watch the video correctly on mobile devices without having to reopen the video when the orientation changes after playing.

I'm having some issues with media queries where when changing to landscape mode on mobile the modal disappears and the visualizer tries to render because I'm only using a max-width query. So, I implemented the max-height media query as well instead. Could this be the problem?

Edit with example:

const Video = ({ src }) => {
   return (
      <video controls width="100%" preload="auto">
         <source src={src} type="video/mp4" />
         Your browser does not support HTML5 video.
      </video>
   )
}

const App = () => {
   // Media queries using ChakraUI hooks
   const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");

  // Render "wrong" modal on mobile devices whether in portrait or landscape mode
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }

}

Answer 1

I feel stupid after spending so much time solving this problem, but I wanted to post the answer in case anyone else has a similar problem.

The problem is related to React's rendering process. <Modal/> is re-rendered every time the media query is updated, which happens when the orientation changes on mobile devices. So when the modal re-renders on orientation change, the video closes. I'm not sure why the media query is causing a re-render (maybe something to do with the settings of ChakraUI hooks), if anyone has this problem maybe it can be elaborated on. However, switching to status solved the problem.

The solution is simple:

const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
  const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");
  
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    if (wIsSmallerThan48em || hIsSmallerThan30em){
       setShowModal(true)
    } else {
       setShowModal(false)
    }
  }, [wIsSmallerThan48em, hIsSmallerThan30em])

  // 在移动设备上无论是纵向还是横向都渲染“错误”模态框
  if (showModal){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }