fix: improve sizing

index.html

@@ -14,13 +14,16 @@
     justify-content: center;
     flex-direction: column;
   }
-  jwplayer-video {
-    aspect-ratio: 16 / 9;
-    background: #000;
+  media-controller:not([audio]) {
+    display: block;         /* expands the container if preload=none */
+    aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
+    width: 100%;
   }
-  media-controller {
+  jwplayer-video {
     display: block;
     width: 100%;
+    aspect-ratio: 16 / 9;
+    background: #000;
   }
 </style>
 
@@ -36,6 +39,7 @@
 
 <h1>&lt;jwplayer-video&gt;</h1>
 <br>
+
 <jwplayer-video
   controls
   src="https://cdn.jwplayer.com/players/C8YE48zj-IxzuqJ4M.html"

jwplayer-video-element.js

@@ -1,7 +1,7 @@
 import { SuperVideoElement } from 'super-media-element';
 
 const templateLightDOM = document.createElement('template');
-templateLightDOM.innerHTML = `
+templateLightDOM.innerHTML = /*html*/`
 <style class="jw-style">
   .jw-no-controls [class*="jw-controls"],
   .jw-no-controls .jw-title {
@@ -12,10 +12,18 @@ templateLightDOM.innerHTML = `
 `;
 
 const templateShadowDOM = document.createElement('template');
-templateShadowDOM.innerHTML = `
+templateShadowDOM.innerHTML = /*html*/`
 <style>
   :host {
+    display: inline-block;
+    min-width: 300px;
+    min-height: 150px;
+    position: relative;
+  }
+  ::slotted(.jwplayer) {
+    position: absolute !important;
     width: 100%;
+    height: 100%;
   }
 </style>
 <slot></slot>
@@ -111,13 +119,7 @@ class JWPlayerVideoElement extends SuperVideoElement {
 
   set controls(val) {
     if (this.controls == val) return;
-
-    if (val) {
-      this.setAttribute('controls', '');
-    } else {
-      // Remove boolean attribute if false, 0, '', null, undefined.
-      this.removeAttribute('controls');
-    }
+    this.toggleAttribute('controls', Boolean(val));
   }
 
   get controls() {