webkitRequestFullscreen doesnt work on ios webview

Question

I am trying to write a custom fullscreen button for video tag.

Here is my code:

const onClickVideoHandler = useCallback(() => {
    console.log(videoRef.current?.webkitRequestFullscreen); // always undefined in ios webview

    if (videoRef.current?.requestFullscreen) {
      videoRef.current?.requestFullscreen();
    } else if (videoRef.current?.msRequestFullscreen) {
      videoRef.current?.msRequestFullscreen();
    } else if (videoRef.current?.mozRequestFullScreen) {
      videoRef.current?.mozRequestFullScreen();
    } else if (videoRef.current?.webkitRequestFullscreen) {
      videoRef.current?.webkitRequestFullscreen();
    }
  }, [videoRef.current]);

<VideoWrapper onClick={onClickVideoHandler}>
  <video ref={videoRef} src={videoLink} muted={muted} controls={false} playsInline autoPlay loop onError={onErrorHandler} />
</VideoWrapper>

When I click on the VideoWrapper I want the video to open in fullscreen mode

I try to call webkitRequestFullscreen(), but this method always undefined in ios webview( as well as mozRequestFullScreen, mozRequestFullScreen, msRequestFullscreen, requestFullscreen)

Is there a method for fullscreen mode in ios webview?

Answer 1

Unfortunately requestFullscreen is only partially supported on iPads but not on iPhones. More information about the availability of this API can be found here: https://caniuse.com/?search=requestFullscreen