@pagix/video-banner

A Puck-native full-width video banner block — a single background video with overlaid eyebrow / headline / subtitle copy and up to two CTA buttons.

Install

pnpm add @pagix/video-banner @anvilkit/ui @puckeditor/core

Styles

Import the package stylesheet once at the app entry (before any VideoBanner renders):

import "@pagix/video-banner/styles.css";

Quickstart

import "@pagix/video-banner/styles.css";
import { VideoBanner, componentConfig, defaultProps } from "@pagix/video-banner";

const config = {
	components: { VideoBanner: componentConfig },
};

const data = {
	root: { props: {} },
	content: [
		{
			type: "VideoBanner",
			props: { id: "video-banner-1", ...defaultProps },
		},
	],
};

Props

• videoUrl — background video source (autoplay / muted / loop default on)
• poster — poster image shown before playback starts
• autoplay / muted / loop — playback flags
• eyebrow / headline / subtitle — overlaid copy (colors, sizes, alignment)
• primaryLabel / primaryHref / secondaryLabel / secondaryHref — CTAs
• overlayOpacity / minHeight / textAlign / textColor — layout

The config factory is locale-aware: createVideoBannerConfig({ locale }) swaps editor labels from the bundled en/zh/ja/ko catalogs.