From 60ed512a6560d24fde807461834b1329220ef677 Mon Sep 17 00:00:00 2001 From: Justin Ribeiro Date: Thu, 14 Nov 2024 14:39:07 -0500 Subject: [PATCH] feat(aspect-ratio): add css custom prop for changing aspect ratio of container (#108) --- demo/aspect-ratio.html | 51 ++++++++ lite-youtube.ts | 6 +- package.json | 1 + test/lite-youtube.test.ts | 58 +++++---- yarn.lock | 248 ++++++++++++++++++++++++++++++++++++-- 5 files changed, 327 insertions(+), 37 deletions(-) create mode 100644 demo/aspect-ratio.html diff --git a/demo/aspect-ratio.html b/demo/aspect-ratio.html new file mode 100644 index 0000000..a52a265 --- /dev/null +++ b/demo/aspect-ratio.html @@ -0,0 +1,51 @@ + + + + + + lite-youtube demo + + + + +
+

YouTube Short testing

+ 
+<style>
  lite-youtube {
    --lite-youtube-aspect-ratio: 2 / 3;
  }
</style>
+<lite-youtube videoid="vMImN9gghao"></lite-youtube>
+
+
+ + + \ No newline at end of file diff --git a/lite-youtube.ts b/lite-youtube.ts index ed0c178..a94e7ef 100644 --- a/lite-youtube.ts +++ b/lite-youtube.ts @@ -118,16 +118,18 @@ export class LiteYTEmbed extends HTMLElement { shadowDom.innerHTML = `