From 375a57b0d9abef4539f891c3ebf5a882e7d52d0c Mon Sep 17 00:00:00 2001
From: Andy Blum <andy.blum.01@gmail.com>
Date: Wed, 3 Jan 2024 17:03:18 -0500
Subject: [PATCH] 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
---
 .../background-media/_background-media.scss       |  8 +-------
 .../components/video-player/_video-player.scss    | 15 +++++++++++++++
 .../video-player/video-player-container.ts        |  8 ++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/styles/scss/components/background-media/_background-media.scss b/packages/styles/scss/components/background-media/_background-media.scss
index ae86deb68a9..5e194d49111 100644
--- 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
index 23cdb92e1c2..f7cfc22bd16 100644
--- 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
index 183f83fa7f7..2f5d45b715e 100644
--- 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) {