Florian Wilde
fdf6452b35
Social Media buendelt Profile auf einer Seite. Wer „@firma" eintippt, meint das Profil beim gewaehlten Netzwerk — daraus wird die volle Adresse. Statt nachgezeichneter Markenlogos steht ein Kreis in der Hausfarbe mit Monogramm; ein schlecht nachgebautes Logo sieht schlechter aus als ein sauberes Zeichen. Video erkennt YouTube, Vimeo und direkte Dateien. Der Rahmen zum Anbieter laedt erst auf Klick, und davor steht, dass dabei Daten uebertragen werden — diese Seite bekommen Fremde nach einem Scan zu sehen, ungefragt einen Drittanbieter einzubinden waere nicht in Ordnung. Videodateien laden mit preload="none": wer unterwegs scannt, zahlt das Volumen.
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Icon } from "@/components/icons";
|
|
|
|
/**
|
|
* Eingebettetes Video mit Zwei-Klick-Lösung.
|
|
*
|
|
* Ein Rahmen von YouTube oder Vimeo baut beim Laden eine Verbindung zum
|
|
* Anbieter auf — auf einer Seite, die Fremde nach einem Scan zu sehen
|
|
* bekommen, ist das ohne Zustimmung nicht in Ordnung. Deshalb erscheint der
|
|
* Rahmen erst nach einem Klick, und es steht vorher da, was dabei passiert.
|
|
*/
|
|
export function EmbeddedVideo({
|
|
embedUrl,
|
|
provider,
|
|
title,
|
|
}: {
|
|
embedUrl: string;
|
|
provider: string;
|
|
title: string;
|
|
}) {
|
|
const [gestartet, setGestartet] = useState(false);
|
|
|
|
if (gestartet) {
|
|
return (
|
|
<div className="aspect-video overflow-hidden rounded-2xl bg-black shadow-sm">
|
|
<iframe
|
|
src={embedUrl}
|
|
title={title}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="h-full w-full border-0"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setGestartet(true)}
|
|
className="group flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-2xl border border-slate-300 bg-slate-900 px-6 text-center shadow-sm transition-colors hover:bg-slate-800"
|
|
>
|
|
<span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-white transition-colors group-hover:bg-white/20">
|
|
<Icon name="video" className="size-8" />
|
|
</span>
|
|
<span className="font-medium text-white">Video abspielen</span>
|
|
<span className="max-w-xs text-xs leading-relaxed text-slate-300">
|
|
Beim Abspielen wird eine Verbindung zu {provider} hergestellt. Dabei
|
|
werden Daten an den Anbieter übertragen.
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|