Embed facade

A platform's short video (TikTok, YouTube Shorts, Instagram) behind a button: until the visitor asks, no frame, no script and no platform picture is requested — the frame is added on the click, sandboxed.

Web · ✓Mobile · n/aBureau · ✓BêtaMédias

import { EmbedFacade, embedUrl, isOwnPoster, EMBED_PLATFORMS } from "@krizaka/ui/embed-facade";

YouTube will receive your visit when you press play.

Web uniquement — React, depuis @krizaka/ui/embed-facade. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A web page's embed; a native app opens the platform's own app or a link. → Video player

Pourquoi il est là. Akinaza's shop pages (krizaka/akinaza#312): the latest TikTok, YouTube Shorts or Instagram reel behind a click, nothing third-party before it.

Quand l’utiliser

A shop or a profile that shows its latest reel from a platform, where privacy law (Québec's Law 25) wants consent before anything third-party loads.
Inside a RetroTv, as the television's screen.

Quand ne pas l’utiliser

A video you host yourself: no facade is needed.À la place : Video player
A plain link to a profile: an anchor with rel="noopener noreferrer" loads nothing.À la place : Chip link

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { EmbedFacade, embedUrl, isOwnPoster, EMBED_PLATFORMS } from "@krizaka/ui/embed-facade";

Exemples

YouTube Shorts

The gate with the host's own poster and a notice; the frame appears on the click.

YouTube will receive your visit when you press play.

TikTok, in French

The same facade without a poster; every word is the host's.

TikTok saura que vous avez ouvert cette vidéo.

Props

A short video from a platform, behind a button: the frame exists only after the click.

Prop	Type	Défaut	Description
`platform`requis	`EmbedPlatform`	—	Which platform's frame to load.
`playLabel`requis	`string`	—	The button: what it does and which platform it loads ("Load TikTok and play"), passed translated.
`title`requis	`string`	—	The accessible name of the video ("Latest reel"), passed translated: it names the frame once loaded.
`url`requis	`string`	—	The public address of the post (`embedUrl` validates it; anything else renders nothing).
`aspectRatio`	`string`	`9 / 16`	The ratio of the box when it stands alone; inside a television's screen it fills its parent.
`notice`	`ReactNode`	—	A line under the button, for what the platform will receive on the click (translated).
`onLoad`	`(() => void)`	—	Called once, when the visitor has asked and the frame is added.
`poster`	`string`	—	The host's own copy of the picture (never an address on the platform: those are refused, they would be a request).

Accessibilité

A group named by title, one native button (44 px at least) that says the platform; the frame carries the same title.
The poster is decorative (empty alt). No motion, so nothing changes under reduced motion.

Clavier

Touches	Action
`Tab, Enter / Space`	Reaches the one button and loads the video; focus moves to the frame.

Bonnes pratiques

Validate the address when the owner saves it, with the same embedUrl(platform, url) the page uses: it returns the frame's address, or null for another host, http:, a short link or a profile.
Give a poster that is your own copy (your storage or CDN). A poster on a platform's domain (ytimg, tiktokcdn, cdninstagram…) is refused: it would be a request before the click.
playLabel names the platform it loads (« Load TikTok and play ») and notice says what the platform receives; both are translated by the host.
The frame needs the host's Content-Security-Policy to allow frame-src for the three platforms; nothing else is loaded.
Inside a television's screen it fills its parent; alone, it takes aspectRatio (9 / 16 by default).

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub