fix(height): remove min-height, use 16:9 default to make it easier (j…

…ustinribeiro#2)
cshawaus · Nov 18, 2019 · 345976f · 345976f
1 parent 4b6a91b
commit 345976f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 * No dependencies; it's just a vanilla web component.
 * It's fast yo.
 * It's Shadow Dom encapsulated!
-* It's responsive (just style it like you normally would with height and width and things)
+* It's responsive 16:9
 * It's accessible via keyboard and will set ARIA via the `videotitle` attribute
 * It's locale ready; you can set the `videoplay` to have a properly locale based label
 
@@ -62,16 +62,17 @@ If you want the paste-and-go version, you can simply load it via CDN:
 ```
 
 ## Style It
-Add a class or just style it directly. Height and Width are responsive in the container (there is a min-height requirement of 315px to make the basic embed work easier).
+Height and Width are responsive in the component.
 ```html
 <style>
   .styleIt {
     width: 400px;
-    height: 400px;
     margin: auto;
   }
 </style>
-<lite-youtube class="styleIt" videoid="guJLfqTFfIw"></lite-youtube>
+<div class="styleIt">
+  <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+</div>
 ```
 
 ## Attributes

diff --git a/demo/index.html b/demo/index.html
@@ -22,8 +22,6 @@
       }
       .styleIt {
         width: 400px;
-        height: 400px;
-        margin: auto;
       }
     </style>
   </head>
@@ -54,11 +52,15 @@ <h3>Change "Play" for Locale</h3>
     <lite-youtube videoid="guJLfqTFfIw" videoplay="Mirar" videotitle="Mis hijos se burlan de mi español"></lite-youtube>
 
     <h3>Style It</h3>
-    <p>Add a class or just style it directly. Height and Width are responsive in the container (there is a min-height requirement of 315px to make the basic embed work easier).</p>
+    <p>Height and Width are responsive in the component.</p>
     <pre>
 
-&lt;style&gt;&#10;  .styleIt {&#10;    width: 400px;&#10;    height: 400px;&#10;    margin: auto;&#10;  }&#10;&lt;/style&gt;&#10;&lt;lite-youtube class=&quot;styleIt&quot; videoid=&quot;guJLfqTFfIw&quot;&gt;&lt;/lite-youtube&gt;
+&lt;style&gt;&#10;  .styleIt {&#10;    width: 400px;&#10;    margin: auto;&#10;  }&#10;&lt;/style&gt;
+&lt;div class=&quot;styleIt&quot;&gt;&#10;      &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot;&gt;&lt;/lite-youtube&gt;&#10;    &lt;/div&gt;
     </pre>
-    <lite-youtube class="styleIt" videoid="guJLfqTFfIw"></lite-youtube>
+    <div class="styleIt">
+      <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+    </div>
+
   </body>
 </html>
diff --git a/lite-youtube.js b/lite-youtube.js
@@ -39,11 +39,9 @@ class LiteYTEmbed extends HTMLElement {
     shadowDom.innerHTML = `
       <style>
         :host {
-          contain: strict;
+          contain: content;
           display: block;
-          position: relative;
-          width: 100%;
-          min-height: 315px;
+          padding-bottom: calc(100% / (16 / 9));
         }
 
         #frame {
@@ -221,7 +219,7 @@ class LiteYTEmbed extends HTMLElement {
     // https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#rule-2---attribute-escape-before-inserting-untrusted-data-into-html-common-attributes
     const escapedVideoId = encodeURIComponent(this.videoId);
     const iframeHTML = `
-<iframe width="560" height="315" frameborder="0"
+<iframe frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
   src="https://www.youtube.com/embed/${escapedVideoId}?autoplay=1"
 ></iframe>`;

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "url": "git@github.com:justinribeiro/lite-youtube.git"
   },
   "license": "MIT",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "lite-youtube.js",
   "module": "lite-youtube.js",
   "keywords": [