feat(video-player): Improve usage as background media (#11188)

* feat(video-player): improve usage as background media * feat(video-player): fix linting error * feat(video-player): fix formatting error * feat(video-player): fix stylelint error * feat(video-player): remove 16/9 default aspect ratio from < md * feat(video-player): document bg-cover styles * feat(video-player): stringify aspect ratio values * feat(video-player): fix ci-check errors * feat(video-player): stylelint fixes
carbon-design-system · Jan 3, 2024 · 375a57b · 375a57b
1 parent bd01c71
commit 375a57b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/packages/styles/scss/components/background-media/_background-media.scss b/packages/styles/scss/components/background-media/_background-media.scss
@@ -18,6 +18,7 @@
   :host(#{$c4d-prefix}-background-media) {
     position: relative;
     display: block;
+    overflow: clip;
     block-size: 100%;
     outline: none;
 
@@ -94,13 +95,6 @@
     line-height: 0;
   }
 
-  .#{$prefix}--background-media--video {
-    aspect-ratio: 16 / 9; /* stylelint-disable-line property-no-unknown */
-    @include breakpoint(md) {
-      aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
-    }
-  }
-
   .#{$prefix}--video-player__controls[hasTooltip] {
     @include tooltip--trigger('definition', top);
     @include tooltip--placement('definition', 'top', 'end');

diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss
@@ -46,6 +46,21 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       padding: 0;
       block-size: 100%;
     }
+
+    /**
+     * These styles mock `object-fit: cover;` and `object-position: center`.
+     *   - Aspect ratio forces the shape of the element.
+     *   - Min-width/height force the element to cover the entire parent footprint.
+     *   - inset/translate combine to ensure the element is centered over the parent footprint.
+     */
+    ::slotted(.#{$c4d-prefix}--video-player__video),
+    .#{$c4d-prefix}--video-player__video {
+      aspect-ratio: var(--native-file-aspect-ratio, 16 / 9);
+      inset: 50% 0 0 50%;
+      min-block-size: 100%;
+      min-inline-size: 100%;
+      translate: -50% -50%;
+    }
   }
 
   .#{$c4d-prefix}--video-player

diff --git a/packages/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts
@@ -242,6 +242,14 @@ export const C4DVideoPlayerContainerMixin = <
         playerId,
         this._getPlayerOptions(backgroundMode)
       );
+      const { width, height } = await KalturaPlayerAPI.api(videoId);
+      videoPlayer.style.setProperty('--native-file-width', `${width}px`);
+      videoPlayer.style.setProperty('--native-file-height', `${height}px`);
+      videoPlayer.style.setProperty(
+        '--native-file-aspect-ratio',
+        `${width} / ${height}`
+      );
+
       doc!.getElementById(playerId)!.dataset.videoId = videoId;
       const videoEmbed = doc!.getElementById(playerId)?.firstElementChild;
       if (videoEmbed) {