diff --git a/packages/web/src/components/CloudflareStreamPlayer.tsx b/packages/web/src/components/CloudflareStreamPlayer.tsx index 058e9971..1f423d4a 100644 --- a/packages/web/src/components/CloudflareStreamPlayer.tsx +++ b/packages/web/src/components/CloudflareStreamPlayer.tsx @@ -42,6 +42,9 @@ export function CloudflareStreamPlayer({ if (!iframe.hasAttribute("allowfullscreen")) { iframe.setAttribute("allowfullscreen", "") } + if (!iframe.hasAttribute("webkitallowfullscreen")) { + iframe.setAttribute("webkitallowfullscreen", "") + } return true } diff --git a/packages/web/src/components/VideoPlayer.tsx b/packages/web/src/components/VideoPlayer.tsx index ca80270c..89b8133b 100644 --- a/packages/web/src/components/VideoPlayer.tsx +++ b/packages/web/src/components/VideoPlayer.tsx @@ -170,6 +170,10 @@ export function VideoPlayer({ const isDocFullscreen = !!doc.fullscreenElement || !!doc.webkitFullscreenElement const isVideoFullscreen = !!videoEl.webkitDisplayingFullscreen + const isAppleMobile = + typeof navigator !== "undefined" && + (/iP(ad|hone|od)/.test(navigator.userAgent) || + (navigator.userAgent.includes("Mac") && navigator.maxTouchPoints > 1)) if (isDocFullscreen) { if (document.exitFullscreen) { @@ -189,6 +193,15 @@ export function VideoPlayer({ return } + if (isAppleMobile && videoEl.webkitEnterFullscreen) { + try { + videoEl.webkitEnterFullscreen() + return + } catch { + // Fall back to other fullscreen methods. + } + } + const requestContainerFullscreen = async () => { if (containerEl.requestFullscreen) { await containerEl.requestFullscreen() @@ -203,8 +216,10 @@ export function VideoPlayer({ try { if (await requestContainerFullscreen()) { - setIsFullscreen(true) - return + if (!!doc.fullscreenElement || !!doc.webkitFullscreenElement) { + setIsFullscreen(true) + return + } } } catch { // Fall through to video fullscreen methods.