Skip to content

Instantly share code, notes, and snippets.

@JLarky
Created April 11, 2023 13:08
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Playing with youtube facade based on vb/lazyframe
<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
/>
---
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment