fix(video-player): correct a visual regression with background video …

…in some contexts (#12081)

### Related Ticket(s)

Closes # {{Provide issue number link(s) to the related ticket(s) that this pull request addresses}}

### Description

Recent changes caused visual regressions due to styles that relied on `[background-video="true"]`. These updates make `background-video` a pure boolean attribute and simplify the style selectors accordingly.

### Changelog

**Changed**

- Make `background-video` a reflected boolean attribute all the time.
- Fix a regression with auto-play video.


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/video-player/_video-player.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,8 +39,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$dds-prefix}-video-player[background-mode='true']),
-  .#{$prefix}--video-player[background-mode='true'] {
+  :host(#{$dds-prefix}-video-player[background-mode]),
+  .#{$prefix}--video-player[background-mode] {
     .#{$prefix}--video-player__video-container {
       height: 100%;
       padding: 0;

packages/web-components/src/components/background-media/__stories__/README.stories.mdx

@@ -69,7 +69,7 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
   <dds-video-player-container
     playing-mode="inline"
     video-id="0_ibuqxqbe"
-    background-mode="true">
+    background-mode>
   </dds-video-player-container>
 </dds-background-media>
 ```

packages/web-components/src/components/background-media/__stories__/background-media.stories.ts

@@ -58,7 +58,7 @@ export const WithVideo = (args) => {
         opacity="${ifNonNull(backgroundOpacity)}">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </div>
   `;

packages/web-components/src/components/leadspace/__stories__/README.stories.mdx

@@ -87,7 +87,7 @@ such:
   <dds-background-media slot="image" opacity="100">
     <dds-video-player-container
       video-id="0_ibuqxqbe"
-      background-mode="true"></dds-video-player-container>
+      background-mode></dds-video-player-container>
   </dds-background-media>
 </dds-leadspace>
 ```

packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -170,7 +170,7 @@ export const SuperWithVideo = (args) => {
       <dds-background-media slot="image" opacity="100">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </dds-leadspace>
   `;
@@ -291,7 +291,7 @@ export const TallWithVideo = (args) => {
       <dds-background-media slot="image" opacity="100">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </dds-leadspace>
   `;
@@ -412,7 +412,7 @@ export const MediumWithVideo = (args) => {
       <dds-background-media slot="image" opacity="100">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </dds-leadspace>
   `;
@@ -536,7 +536,7 @@ export const ShortWithVideo = (args) => {
       <dds-background-media slot="image" opacity="100">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </dds-leadspace>
   `;
@@ -645,7 +645,7 @@ export const CenteredWithVideo = (args) => {
       <dds-background-media slot="image" opacity="100">
         <dds-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></dds-video-player-container>
+          background-mode></dds-video-player-container>
       </dds-background-media>
     </dds-leadspace>
   `;

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

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -194,7 +194,7 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
   /**
    * `true` to autoplay, mute, and hide player UI.
    */
-  @property({ type: Boolean, attribute: 'background-mode' })
+  @property({ type: Boolean, attribute: 'background-mode', reflect: true })
   backgroundMode = false;
 
   /**

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

@@ -182,34 +182,42 @@ export const DDSVideoPlayerContainerMixin = <
       const { backgroundMode, autoPlay, muted } =
         this as unknown as DDSVideoPlayerComposite;
       let playerOptions = {};
-      const autoplayPreference = autoPlay
-        ? this._getAutoplayPreference()
-        : false;
-
-      if (backgroundMode) {
-        playerOptions = {
-          'topBarContainer.plugin': false,
-          'controlBarContainer.plugin': false,
-          'largePlayBtn.plugin': false,
-          'loadingSpinner.plugin': false,
-          'unMuteOverlayButton.plugin': false,
-          'EmbedPlayer.DisableVideoTagSupport': false,
-          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,
-          },
-        };
-      } else {
-        playerOptions = {
-          autoMute: muted,
-          autoPlay: autoplayPreference,
-        };
+      const autoplayPreference = this._getAutoplayPreference();
+
+      switch (true) {
+        case autoPlay:
+          playerOptions = {
+            autoMute: muted,
+            autoPlay: autoplayPreference,
+          };
+          break;
+
+        case backgroundMode:
+          playerOptions = {
+            'topBarContainer.plugin': false,
+            'controlBarContainer.plugin': false,
+            'largePlayBtn.plugin': false,
+            'loadingSpinner.plugin': false,
+            'unMuteOverlayButton.plugin': false,
+            'EmbedPlayer.DisableVideoTagSupport': false,
+            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,
+            },
+          };
+          break;
+
+        default:
+          playerOptions = {
+            autoMute: muted,
+          };
+          break;
       }
 
       return playerOptions;