Playing with youtube facade based on vb/lazyframe

01_ExampleUsage.astro

<LazyFrame
  loading="lazy"
  style={{
    position: "absolute",
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    borderRadius: "10px",
  }}
  width="560"
  height="315"
  src="https://www.youtube.com/embed/9Dz0Hhr13zg?vq=hd1080"
  title="Bob and Alice"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
/>

LazyFrame.astro

---
import wretch from "wretch";
import "lazyframe/dist/lazyframe.css";
export interface Props extends astroHTML.JSX.IframeHTMLAttributes {
  src: string;
  style?: Partial<CSSStyleDeclaration>;
}
const { style, ...props } = Astro.props;

const url = new URL("https://noembed.com/embed");
const search = new URLSearchParams();
search.set("url", props.src);
url.search = search.toString();

const { thumbnail_url, title } = await wretch(url.toString())
  .get()
  .fetchError(error => {
    console.error(error);
    throw new Error("Failed to fetch embed data: " + url);
  })
  .json<{
    url: string;
    thumbnail_height: number;
    version: string;
    width: number;
    thumbnail_width: number;
    provider_name: string;
    author_url: string;
    author_name: string;
    thumbnail_url: string;
    title: string;
    height: number;
    provider_url: string;
    type: string;
    html: string;
  }>();
---

<lazy-frame
  class="lazyframe"
  data-vendor="youtube"
  style={{ backgroundImage: `url(${thumbnail_url})`, ...style }}
  {...props}
>
  <span class="lazyframe__title">{title}</span>
  <template><iframe {...props}></iframe></template>
</lazy-frame>
<script>
  class LazyFrame extends HTMLElement {
    constructor() {
      super();
      const that = this;
      function activate() {
        const template = that.querySelector("template")!;
        const content = template.content.cloneNode(true);
        that.appendChild(content);
        that.removeEventListener("click", activate);
      }
      this.addEventListener("click", activate);
    }
  }
  customElements.define("lazy-frame", LazyFrame);
</script>
<style>
  .lazyframe__title::before {
    border-radius: 10px;
  }
</style>