Documentation 2.2.8
Home GitHub

Mobile Fullscreen

This page covers how the full button behaves on desktop versus mobile, and how the hidden mobile fullscreen player stays in sync.

Device Detection

FlexPlyr detects the device from the User-Agent on load (src/js/main.js):

Flag Condition
isMobile UA contains iphone, ipad, ipod, or android
isIOS UA contains iphone, ipad, or ipod

Desktop

The full button calls requestFullscreen on the .FPlyr container (including the webkit/moz/ms prefixed versions), calls exitFullscreen on the next click, and updates player.stateFull.

Mobile

Inline video on mobile is bound by playsinline, so a custom panel cannot follow it into fullscreen. FlexPlyr therefore creates a hidden fullscreen player (class PDFullPlayer, moved off-screen by CSS):

Source Fullscreen player How it enters
video A second <video> without playsinline full → pause the main player → play(true) plays the fullscreen player, which the OS shows natively fullscreen
youtube A second YT.Player with playsinline: 0 Same; calling play(true) before that player's onReady shows alert("not Ready")
vimeo None; the main player is reused play(true) calls requestFullscreen() and then plays
audio None The full button is not rendered

Syncing In and Out

When What happens
The fullscreen player starts (video playing / YouTube state 3) Pauses the main player, copies its time, volume, and speed to the fullscreen player, then plays
The fullscreen player pauses (leaving fullscreen) Copies time, volume, and speed back to the main player and updates the panel progress
iOS webkitpresentationmodechanged / otherwise fullscreenchange Updates player.stateFull

On mobile, tapping the video picture does not toggle playback; only the panel buttons do.

Example

Desktop browsers create no fullscreen player; open this page on iOS or Android and the count is 1:

<div style="height: 240px"><div id="player"></div></div>
<script>
  const player = new FPlyr({
    id: "player",
    video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
    option: { panelItem: ["play", "progress", "full"] },
  });
  console.log("hidden fullscreen players:", document.querySelectorAll(".PDFullPlayer").length);
  console.log("stateFull:", player.stateFull);
</script>
Live preview · @pardnchiu/flexplyr@2.2.9

Known Issue

When a mobile device is already in fullscreen, the full button calls player.mobilePause() (src/js/model/playerPanel.js:167), but FPlyr has no such method, so the click throws a TypeError.

中文