Add an aspectratio attribute

Makes it possible to handle non-16/9 videos, and fixes justinribeiro#92.
elibarzilay · Jul 28, 2023 · 2271641 · 2271641
1 parent 50c254b
commit 2271641
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -59,6 +59,14 @@ export class LiteYTEmbed extends HTMLElement {
     this.setAttribute('playlistid', id);
   }
 
+  get aspectRatio(): string {
+    return this.getAttribute('aspectratio') ?? '';
+  }
+
+  set aspectRatio(title: string) {
+    this.setAttribute('aspectratio', title);
+  }
+
   get videoTitle(): string {
     return this.getAttribute('videotitle') || 'Video';
   }
@@ -122,12 +130,12 @@ export class LiteYTEmbed extends HTMLElement {
           display: block;
           position: relative;
           width: 100%;
-          padding-bottom: calc(100% / (16 / 9));
+          padding-bottom: calc(100% / (${this.aspectRatio || '16 / 9'}));
         }
 
         @media (max-width: 40em) {
           :host([short]) {
-            padding-bottom: calc(100% / (9 / 16));
+            padding-bottom: calc(100% / (${this.aspectRatio || '9 / 16'}));
           }
         }