feat(UI): Allow customizate FullScreen element (#4963)

Closes #4859

ui/controls.js

@@ -594,7 +594,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
         }
-        await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
+        const fullScreenElement = this.config_.fullScreenElement;
+        await fullScreenElement.requestFullscreen({navigationUI: 'hide'});
 
         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
           // Locking to 'landscape' should let it be either

ui/externs/ui.js

@@ -85,7 +85,8 @@ shaka.extern.UIVolumeBarColors;
  *   enableFullscreenOnRotation: boolean,
  *   forceLandscapeOnFullscreen: boolean,
  *   enableTooltips: boolean,
- *   keyboardSeekDistance: number
+ *   keyboardSeekDistance: number,
+ *   fullScreenElement: HTMLElement
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -183,6 +184,9 @@ shaka.extern.UIVolumeBarColors;
  *   right keyboard keys when the video is selected. If less than or equal to 0,
  *   no seeking will occur.
  *   Defaults to 5 seconds.
+ * @property {HTMLElement} fullScreenElement
+ *   DOM element on which fullscreen will be done.
+ *   Defaults to Shaka Player Container.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

ui/ui.js

@@ -34,6 +34,9 @@ shaka.ui.Overlay = class {
     /** @private {shaka.Player} */
     this.player_ = player;
 
+    /** @private {HTMLElement} */
+    this.videoContainer_ = videoContainer;
+
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.defaultConfig_();
 
@@ -240,6 +243,7 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
       keyboardSeekDistance: 5,
+      fullScreenElement: this.videoContainer_,
     };
 
     // Check AirPlay support