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/aDesktop · ✓BetaMedia

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

YouTube will receive your visit when you press play.

Web only — React, from @krizaka/ui/embed-facade. Beta: its API may still change in a minor version.

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

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

When to use

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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`platform`required	`EmbedPlatform`	—	Which platform's frame to load.
`playLabel`required	`string`	—	The button: what it does and which platform it loads ("Load TikTok and play"), passed translated.
`title`required	`string`	—	The accessible name of the video ("Latest reel"), passed translated: it names the frame once loaded.
`url`required	`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).

Accessibility

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.

Keyboard

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

Best practices

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).

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub