[DDSVideoPlayerContainerMixin] Customize Kaltura params (#10962)

* feat(video-player): move player options into a method

* feat(video-player): additional kaltura config for background video

packages/web-components/src/components/video-player/video-player-container.ts

@@ -175,32 +175,8 @@ export const DDSVideoPlayerContainerMixin = <
       return returnValue;
     }
 
-    /**
-     * Sets up and sends the API call for embedding video for the given video ID.
-     *
-     * @param videoId The video ID.
-     * @private
-     */
-    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    async _embedVideoImpl(videoId: string, backgroundMode = false) {
-      const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode')
-        ? (this.getRootNode() as Document | ShadowRoot)
-        : this.ownerDocument;
-      // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,
-      // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered
-      const playerId = Math.random().toString(36).slice(2);
-      const div = document.createElement('div');
-      div.id = playerId;
-      div.className = `${prefix}--video-player__video`;
-      const { _videoPlayer: videoPlayer } = this;
-      if (!videoPlayer) {
-        throw new TypeError(
-          'Cannot find the video player component to put the video content into.'
-        );
-      }
-      videoPlayer.appendChild(div);
-
-      let additionalPlayerOptions = {};
+    _getPlayerOptions(backgroundMode = false) {
+      let playerOptions = {};
 
       if (backgroundMode) {
         const storedMotionPreference: boolean | null =
@@ -215,7 +191,7 @@ export const DDSVideoPlayerContainerMixin = <
         } else {
           autoplayPreference = storedMotionPreference;
         }
-        additionalPlayerOptions = {
+        playerOptions = {
           'topBarContainer.plugin': false,
           'controlBarContainer.plugin': false,
           'largePlayBtn.plugin': false,
@@ -225,12 +201,48 @@ export const DDSVideoPlayerContainerMixin = <
           loop: true,
           autoMute: true,
           autoPlay: autoplayPreference,
+          // Turn off CTA's including mid-roll card and end cards.
+          'ibm.callToActions': false,
+          // Turn off captions display, background/ambient videos have no
+          // audio.
+          closedCaptions: {
+            plugin: false,
+          },
         };
       }
+
+      return playerOptions;
+    }
+
+    /**
+     * Sets up and sends the API call for embedding video for the given video ID.
+     *
+     * @param videoId The video ID.
+     * @private
+     */
+    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+    async _embedVideoImpl(videoId: string, backgroundMode = false) {
+      const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode')
+        ? (this.getRootNode() as Document | ShadowRoot)
+        : this.ownerDocument;
+      // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,
+      // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered
+      const playerId = Math.random().toString(36).slice(2);
+      const div = document.createElement('div');
+      div.id = playerId;
+      div.className = `${prefix}--video-player__video`;
+      const { _videoPlayer: videoPlayer } = this;
+      if (!videoPlayer) {
+        throw new TypeError(
+          'Cannot find the video player component to put the video content into.'
+        );
+      }
+      videoPlayer.appendChild(div);
+
       const embedVideoHandle = await KalturaPlayerAPI.embedMedia(
         videoId,
         playerId,
-        additionalPlayerOptions
+        this._getPlayerOptions(backgroundMode)
       );
       doc!.getElementById(playerId)!.dataset.videoId = videoId;
       const videoEmbed = doc!.getElementById(playerId)?.firstElementChild;