diff --git a/examples/vanilla-ts-esm/public/mux-player.html b/examples/vanilla-ts-esm/public/mux-player.html
index b051716e0..93a4cbe0b 100644
--- 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
index b734a07e1..34f7a6e8f 100644
--- 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
index 52423fce1..59b74aab8 100644
--- 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 {
