Peter Meier
34 lines
1.2 KiB
Svelte
34 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { getBlockLayoutClasses } from "../../lib/block-layout";
|
|
import type { YoutubeVideoBlockData } from "../../lib/block-types";
|
|
|
|
let { block }: { block: YoutubeVideoBlockData } = $props();
|
|
|
|
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
|
|
const embedUrl = $derived(
|
|
block.youtubeId
|
|
? `https://www.youtube-nocookie.com/embed/${encodeURIComponent(block.youtubeId)}?rel=0${block.params ? `&${String(block.params).replace(/^&/, "")}` : ""}`
|
|
: null,
|
|
);
|
|
</script>
|
|
|
|
<div class={layoutClasses} data-block-type="youtube_video" data-block-slug={block._slug}>
|
|
{#if block.youtubeId}
|
|
<div class="aspect-video w-full overflow-hidden rounded-sm bg-stein-100">
|
|
<iframe
|
|
title={block.title ?? "YouTube-Video"}
|
|
src={embedUrl}
|
|
class="h-full w-full border-0"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
{#if block.description}
|
|
<div class="mt-1 text-sm text-stein-600">{block.description}</div>
|
|
{/if}
|
|
{:else}
|
|
<div class="text-sm text-stein-500">YouTube-Video-ID fehlt.</div>
|
|
{/if}
|
|
</div>
|