Anchor controls inside bottom of video element

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) {

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 {

resources/media_controls.js

@@ -6,6 +6,7 @@
   "use strict";
 
   const MARKUP = `
+    <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">
@@ -14,6 +15,7 @@
       </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":