@slideskit/video

Video block extension for SlidesKit. Adds a video block type powered by react-player, supporting YouTube, Vimeo, file paths, and more.

Installation

npm install @slideskit/core @slideskit/video react-player

Quick Start

import { Presentation } from "@slideskit/core";
import { videoBlockRegistry } from "@slideskit/video";
import "@slideskit/core/styles.css";
import "@slideskit/video/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: {},
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Demo Video",
      content: [
        {
          type: "video",
          content: {
            src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
            controls: true,
            muted: true,
            aspect: "video",
          },
        },
      ],
    },
  ],
};

function App() {
  return (
    <Presentation
      presentation={presentation}
      blockRegistry={videoBlockRegistry}
    />
  );
}

Video Block Schema

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | required | Video URL (YouTube, Vimeo, file path, HLS, DASH, etc.) | | poster | string | — | Poster image URL (preview before playback) | | playing | boolean | false | Autoplay when slide is visible | | controls | boolean | true | Show player controls | | loop | boolean | false | Loop the video | | muted | boolean | true | Mute (required for autoplay in most browsers) | | aspect | "video" | "square" | "portrait" | "video" | Aspect ratio (16:9, 1:1, 3:4) |

Merging with Other Block Registries

If you have custom block types, merge the video registry:

import { withVideoBlock } from "@slideskit/video";

const blockRegistry = withVideoBlock({
  myCustomBlock: myCustomRenderer,
});

<Presentation presentation={presentation} blockRegistry={blockRegistry} />

Supported Sources

react-player supports YouTube, Vimeo, Facebook, Twitch, SoundCloud, Streamable, Wistia, DailyMotion, and direct file paths (MP4, WebM, etc.).

License

MIT