<p>I'm rendering a video using React and HTML5's <code><video></code> 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? </p> <p>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. </p> <p>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? </p> <p>Edit with example: </p> <pre class="brush:php;toolbar:false;">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 /> ) } }</pre></p>

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 />
     )
  }