YouTube - fix fullscreen on iPhone

For websites using CSS transfrom on one of the player parent elements.
foliovision · Sep 30, 2022 · 921813e · 921813e
1 parent 05062e4
commit 921813e
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/flowplayer/modules/fullscreen-fix.module.js b/flowplayer/modules/fullscreen-fix.module.js
@@ -106,7 +106,12 @@ flowplayer(function(player, root) {
       common.toggleClass(root, 'fp-minimal-fullscreen', common.hasClass(root, 'fp-minimal'));
       common.removeClass(root, 'fp-minimal');
 
-      if (!FS_SUPPORT) common.css(root, 'position', 'fixed');
+      if (!FS_SUPPORT) {
+        common.css(root, 'position', 'fixed');
+
+        sanitize_parent_elements(true);
+      }
+
       player.isFullscreen = true;
 
    }).on(FS_EXIT, function() {
@@ -117,7 +122,11 @@ flowplayer(function(player, root) {
         oldOpacity = root.css('opacity') || '';
         common.css(root, 'opacity', 0);
       }
-      if (!FS_SUPPORT) common.css(root, 'position', '');
+      if (!FS_SUPPORT) {
+        common.css(root, 'position', '');
+
+        sanitize_parent_elements(false);
+      }
 
       common.removeClass(root, 'is-fullscreen');
       if (!FS_SUPPORT && player.engine === "html5") setTimeout(function() { root.css('opacity', oldOpacity); });
@@ -134,4 +143,21 @@ flowplayer(function(player, root) {
      FULL_PLAYER = null;
      common.removeNode(wrapper);
    });
+
+   /*
+    * iPhone fullscreen is CSS-based and it can't work if the parent elements use CSS transform
+    * So we get rid of these rules even entering fullscreen and put them back when leaving
+    */
+   function sanitize_parent_elements( add ) {
+     var parent = root;
+     while (parent) {
+       try {
+         var styles = getComputedStyle(parent);
+         if( styles.transform ) {
+           parent.style.transform = add ? 'none' : '';
+         }
+       } catch(e) {}
+       parent = parent.parentNode;
+     }
+   }
 });