CODEWITHSUNDEEP
htmlcssreactjsvideohtml5-video
Ammar Ahmed
Ammar Ahmed

Reputation: 474

Changing orientation with a HTML5 video playing on Safari iOS caused the video to close

I'm rendering a video in React with HTML5 <video> tag and when I open the website on my iPhone, the video plays in the native iOS Safari video player, however, when I change orientation to watch the video in landscape mode, the video closes. Is there some configuration with the HTML5 video tag that I need to implement? or is this an issue with my React rendering?

For more insight, I'm developing an algorithm visualizer which I don't want to support on mobile for the time-being. So, I use some media queries to show a modal which tells the user to open the page on a larger screen when its on mobile. Inside the modal, I have a video of the website for demo purposes so I want people to be able to watch the video properly on mobile and not have to reopen the video if they change orientation after playing it.

I was having some issues with the media queries, as in, the modal would go away when changing to landscape mode on mobile and would try to render the visualizer as I was only using max-width queries. So, I changed it to implement a max-height media query as well. Is this possibly the issue?

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)");

  // renders "error" modal on mobile regardless of portrait or landscape
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }

}

Upvotes: 0

Views: 483

Answers (1)

Ammar Ahmed
Ammar Ahmed

Reputation: 474

I feel quite stupid after spending so much time figuring this out, however, I thought I'd post the answer in case anyone faces a similar problem.

The issue had to do with the React rendering process. The <Modal/> was re-rendering whenever the media queries would update which would happen whenever the orientation changed on mobile. For this reason, the video would close out as the modal is being re-rendered on orientation change. I'm not sure why the media queries caused re-rendering (probably something to do with how the ChakraUI hooks are setup), maybe someone can elaborate if they come across this. But, switching to state did the trick.

The fix was as simple as:

  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])

  // renders "error" modal on mobile regardless of portrait or landscape
  if (showModal){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }

Upvotes: 0

Related Questions