diff --git a/resources/media_controls.css b/resources/media_controls.css
index 8869aa169fd..cbea462157c 100644
--- a/resources/media_controls.css
+++ b/resources/media_controls.css
@@ -15,6 +15,8 @@ button {
 .root {
   display: block;
   position: relative;
+  min-height: 40px;
+  min-width: 200px;
 }
 
 .controls {
diff --git a/resources/media_controls.js b/resources/media_controls.js
index d00a9319e32..dc73d9ea6d3 100644
--- a/resources/media_controls.js
+++ b/resources/media_controls.js
@@ -212,9 +212,14 @@
     }
 
     render(from = this.state) {
-      // XXX This should use clientHeight/clientWidth
-      this.root.style.height = this.media.videoHeight;
-      this.root.style.width = this.media.videoWidth;
+      const isAudioOnly = this.media.localName == "audio";
+      if (!isAudioOnly) {
+        // XXX This should ideally use clientHeight/clientWidth,
+        //     but for some reason I couldn't figure out yet,
+        //     using it breaks layout.
+        this.root.style.height = this.media.videoHeight;
+        this.root.style.width = this.media.videoWidth;
+      }
 
       // Error
       if (this.state == ERRORED) {