Video embed

---
type Props = {
  id: string;
  title: string;
  class?: string;
};

const { id, title, class: className } = Astro.props;
---

<div class:list={["relative aspect-video w-full overflow-hidden border border-border bg-ph-black", className]}>
  <iframe
    class="absolute inset-0 size-full"
    src={`https://www.youtube-nocookie.com/embed/${id}`}
    title={title}
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"
    allowfullscreen></iframe>
</div>

import { cn } from "./cn";

export function VideoEmbed({ id, title, className }: { id: string; title: string; className?: string }) {
  return (
    <div className={cn("relative aspect-video w-full overflow-hidden border border-border bg-ph-black", className)}>
      <iframe
        className="absolute inset-0 size-full"
        src={`https://www.youtube-nocookie.com/embed/${id}`}
        title={title}
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
}

export const cn = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ");