Make aspect-ratio configurable on <mux-player>

Related muxinc/media-chrome#66
luwes · Feb 4, 2022 · 282dc62 · 282dc62
1 parent 0274806
commit 282dc62
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/examples/vanilla-ts-esm/public/mux-player.html b/examples/vanilla-ts-esm/public/mux-player.html
@@ -21,6 +21,7 @@
   </head>
   <body>
     <!-- Test attributes
+      style="aspect-ratio: 16 / 10"
       primary-color="#5c6ac4"
       secondary-color="#ecc94b"
       playback-id="xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE"

diff --git a/packages/mux-player/src/helpers.ts b/packages/mux-player/src/helpers.ts
@@ -70,7 +70,6 @@ export function getChromeStylesFromProps(props: any) {
     : {};
 
   return stylePropsToString({
-    maxWidth: "100%",
     ...primaryColorStyles,
     ...secondaryColorStyles,
   });

diff --git a/packages/mux-player/src/styles.css b/packages/mux-player/src/styles.css
@@ -1,9 +1,16 @@
+:host {
+  /* default aspect ratio, overwrite w/ e.g. style="aspect-ratio: 16 / 10" */
+  aspect-ratio: 16 / 9;
+}
+
 media-controller {
   --media-control-background: transparent;
   --media-control-hover-background: transparent;
   --media-range-track-background: rgba(255, 255, 255, 0.5);
   --media-range-track-border-radius: 3px;
-  --media-aspect-ratio: 16 / 9;
+  --media-aspect-ratio: auto;
+  width: 100%;
+  height: 100%;
 }
 
 .mxp-spacer {