fix(fs): don't set player element css props on native fullscreen (#6673)

Fixes #6640
videojs · May 28, 2020 · d6b07f0 · d6b07f0 · iamabhyas · Jun 19, 2020
1 parent 756fbfc
commit d6b07f0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
@@ -113,12 +113,13 @@ body.vjs-full-window {
   bottom: 0;
   right: 0;
 }
-.video-js.vjs-fullscreen {
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
   width: 100% !important;
   height: 100% !important;
   // Undo any aspect ratio padding for fluid layouts
   padding-top: 0 !important;
 }
+
 .video-js.vjs-fullscreen.vjs-user-inactive {
   cursor: none;
 }

diff --git a/src/js/player.js b/src/js/player.js
@@ -2077,6 +2077,9 @@ class Player extends Component {
    */
   handleTechFullscreenChange_(event, data) {
     if (data) {
+      if (data.nativeIOSFullscreen) {
+        this.toggleClass('vjs-ios-native-fs');
+      }
       this.isFullscreen(data.isFullscreen);
     }
   }

diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js
@@ -626,7 +626,11 @@ class Html5 extends Tech {
         this.el_.webkitPresentationMode !== 'picture-in-picture') {
         this.one('webkitendfullscreen', endFn);
 
-        this.trigger('fullscreenchange', { isFullscreen: true });
+        this.trigger('fullscreenchange', {
+          isFullscreen: true,
+          // set a flag in case another tech triggers fullscreenchange
+          nativeIOSFullscreen: true
+        });
       }
     };