diff --git a/components/script/dom/htmlmediaelement.rs b/components/script/dom/htmlmediaelement.rs
index 3e640fee358..a242300efec 100644
--- a/components/script/dom/htmlmediaelement.rs
+++ b/components/script/dom/htmlmediaelement.rs
@@ -1725,9 +1725,7 @@ impl HTMLMediaElement {
     }
 
     fn render_controls(&self) {
-        println!("render_controls");
         // XXX cannot render controls while parsing.
-        // XXX render controls as a top layer.
         // XXX check that controls are not already rendered.
         let element = self.htmlelement.upcast::<Element>();
         if let Ok(shadow_root) = element.attach_shadow(IsUserAgentWidget::Yes) {
diff --git a/resources/media_controls.css b/resources/media_controls.css
index 5d9ab8ca6bf..4ec05f1beca 100644
--- a/resources/media_controls.css
+++ b/resources/media_controls.css
@@ -5,11 +5,17 @@ button {
   border: none;
 }
 
-.controls {
+.root {
   display: block;
-  position: fixed;
+  position: relative;
   width: 100%;
-  padding: 0 9px;
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
 }
 
 .hidden {
diff --git a/resources/media_controls.js b/resources/media_controls.js
index 827c8f1cee8..7a197f1f6d8 100644
--- a/resources/media_controls.js
+++ b/resources/media_controls.js
@@ -6,14 +6,16 @@
   "use strict";
 
   const MARKUP = `
-    <button id="play-pause-button"></button>
-    <input id="progress" type="range" value="0" min="0" max="100" step="1"></input>
-    <span id="position-duration-box" class="hidden">
-      #1
-      <span id="duration"> / #2</span>
-    </span>
-    <button id="volume-switch"></button>
-    <input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
+    <div class="controls">
+      <button id="play-pause-button"></button>
+      <input id="progress" type="range" value="0" min="0" max="100" step="1"></input>
+      <span id="position-duration-box" class="hidden">
+        #1
+        <span id="duration"> / #2</span>
+      </span>
+      <button id="volume-switch"></button>
+      <input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
+    </div>
   `;
 
   // States.
@@ -84,10 +86,10 @@
       this.media = this.controls.host;
 
       // Create root element and load markup.
-      const root = document.createElement("div");
-      root.classList.add("controls");
-      root.innerHTML = MARKUP;
-      this.controls.appendChild(root);
+      this.root = document.createElement("div");
+      this.root.classList.add("root");
+      this.root.innerHTML = MARKUP;
+      this.controls.appendChild(this.root);
 
       // Import elements.
       this.elements = {};
@@ -210,6 +212,9 @@
     }
 
     render(from = this.state) {
+      // XXX This should use clientHeight.
+      this.root.style.height = this.media.videoHeight;
+
       // Error
       if (this.state == ERRORED) {
         //XXX render errored state
@@ -302,6 +307,7 @@
           break;
         case "volumechange":
         case "timeupdate":
+        case "resize":
           this.render();
           break;
         case "loadedmetadata":