How to add fullscreen button in Ionic 7 and React 18 app?

[nora-tran]

Hello, I am trying to display a video from youtube in my Ionic 7 and React 18 app but just cannot get the fullscreen button to work. I use custom layout and it work fine for play button. Are there any way to workaround it?

Here is my code and result using Custom Layout in iOS simulator (ignore the ugly style)

import { useRef } from 'react';
import { faPlay, faPause, faMinimize, faExpand } from '@fortawesome/pro-solid-svg-icons';
import { Controls, FullscreenButton, MediaPlayer, MediaPlayerInstance, MediaProvider, PlayButton, Poster, useMediaState } from '@vidstack/react';
import thumbnail from '@src/assets/images/graphics/video-thumbnail.svg';
import { Icon } from '../icon';

export const VideoPlayer = () => {
  const player = useRef<MediaPlayerInstance>(null);
  const isPaused = useMediaState('paused', player);
  const isFullscreen = useMediaState('fullscreen', player);

  return (
    <MediaPlayer
      ref={player}
      playsInline
      aspectRatio="16/9"
      src="https://www.youtube.com/embed/YN2H_sKcmGw"
      posterLoad="eager"
      className="media-player"
    >
      <MediaProvider>
        <Poster className="vds-poster" src={thumbnail} alt="movie trailer" />
      </MediaProvider>
      <Controls.Root className="vds-controls">
        <Controls.Group className="vds-controls-group" />
        <div className="vds-controls-spacer" />
        <Controls.Group className="vds-controls-group">
          <PlayButton className="vds-button">
            <Icon icon={isPaused ? faPlay : faPause} />
          </PlayButton>
        </Controls.Group>
        <div className="vds-controls-spacer" />
        <Controls.Group className="vds-controls-group">
          <FullscreenButton>
            <Icon icon={isFullscreen ? faMinimize : faExpand} />
          </FullscreenButton>
        </Controls.Group>
      </Controls.Root>
    </MediaPlayer>
  );
};

[wsamoht]

I am implementing Vidstack in an Ionic Angular app using the default player. The fullscreen button doesn't appear on iOS. With a little research, it seems that the player is getting back from iOS that fullscreen is not supported.

const { canFullscreen, fullscreen } = player.state;

try {
  await player.enterFullscreen()
} catch(e) {
  console.log(e)
}

canFullscreen returns false.

Trying to call enterFullscreen() returns "Error: [vidstack] fullscreen is not currently available on target prefer-media".

It looks like the Fullscreen API is not supported here and here on iOS WebView. We are coming from Plyr which had a fallback of a "full window" which emulated a fullscreen. Vidstack must not have this fallback.

Looks like the only option on iOS is to set playsinline=false. That will then use the iOS native video player and force fullscreen on play.

Issues:

• Vimeo - fullscreen button not shown / not working on iphone #1283
• Full screen button doesn't work #1154

[wsamoht]

This does seem to contradict what is said here. Maybe something is different in the iOS WebView?

The playsinline property will indicate that video content should be played inline (on mobile only), rather than launching the video in fullscreen mode on play. In addition, setting this property will also ensure custom player UI is displayed on iPhone when playing inline (hidden in fullscreen mode as native controls are forcefully displayed by the browser).

[wsamoht]

After a little more research, this issue only pertains to YouTube videos! Vimeo and normal MP4 videos work just fine when playsinline=true on iOS. Sounds like from this comment, YouTube doesn't have the API to send a fullscreen command.