Improve fullscreen support for CloudflareStreamPlayer and VideoPlayer components

- Add missing `webkitallowfullscreen` attribute in CloudflareStreamPlayer
- Enhance VideoPlayer to detect iOS devices and use `webkitEnterFullscreen` when available
- Adjust fullscreen state setting to account for WebKit-specific fullscreen elements

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
     }
 

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)
+        if (!!doc.fullscreenElement || !!doc.webkitFullscreenElement) {
-        return
+          setIsFullscreen(true)
+          return
+        }
       }
     } catch {
       // Fall through to video fullscreen methods.