react - prevent video from going fullscreen on iOS

Question

I am making a web app with video playback and custom controls: a Next Video button and a Previous Video Button. My component looks like this:


const videos = [
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/82818a63-1972-4e39-b296-9cd3b85b0b39.mp4',
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/dd4dd6c5-95b7-41c2-b131-7b62392ad1b5.mp4',
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/29812506-e67d-4cab-b2b3-82461a4eadf1.mp4',
]

function App() {

    const [videoIndex, setVideoIndex] = useState(0);
    const h1Ref = useRef<HTMLVideoElement>(null);

    return (
        <div>
            <DivButton onClick={() => {
                setVideoIndex(getPrevIndex(videoIndex));
                h1Ref.current!.load();
            }}>
                Prev
            </DivButton>
            {' '}
            <DivButton onClick={() => {
                setVideoIndex(getNextIndex(videoIndex));
                h1Ref.current!.load();
            }}>
                Next
            </DivButton>
            <div>
                <video id="video_player" autoPlay muted loop playsinline preload="" ref={h1Ref}>
                    <source id="video_player_source" src={videos[videoIndex]} type="video/mp4"/>
                </video>

            </div>

        </div>
    );
}

The problem is this: when I click Next or Prev buttons, the videos do switch between one another, but after every switch they are entering fullscreen mode on iOS. I don't need that, I need my controls around the video being played.

Is there a way to prevent that?

Gyanreyer Gyanreyer · Accepted Answer · 2020-05-28T23:06:14

Assuming you already found an answer but for other people looking at this in the future, I suspect the issue was your capitalization of playsinline - in React you have to provide it as playsInline in order for it to be applied correctly, but that prop should prevent iOS from forcing videos into fullscreen when they start playing.

react - prevent video from going fullscreen on iOS

1 Answers