Skip to content
Starlight Videos

Getting Started

A Starlight plugin to quickly and easily enhance your documentation with video guides and courses.

  • Easily tranform any documentation page into a video guide or course
  • Support for individual videos or collections of videos
  • Quickly list all videos or video collections in dedicated pages
  • Enhance your videos with interactive lists, quizzes, transcripts, and more

Check out the demo guides and demo courses pages for a preview of the plugin.

Prerequisites

Section titled “Prerequisites”

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

Section titled “Installation”

  1. Starlight Videos is a Starlight plugin. Install it using your favorite package manager:

    Terminal window
    npm i starlight-videos

  2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

    astro.config.mjs
    // @ts-check
    import starlight from '@astrojs/starlight'
    import { defineConfig } from 'astro/config'
    import starlightVideos from 'starlight-videos'
    

    export default defineConfig({
      integrations: [
        starlight({
          plugins: [starlightVideos()],
          title: 'My Docs',
        }),
      ],
    })

  3. Starlight Videos uses Astro’s content collections, which are configured in the src/content.config.ts file.

    Update the content config file to add support for customizing documentation pages with videos using their frontmatter:

    src/content.config.ts
    import { docsLoader } from '@astrojs/starlight/loaders'
    import { docsSchema } from '@astrojs/starlight/schema'
    import { defineCollection } from 'astro:content'
    import { videosSchema } from 'starlight-videos/schemas'
    

    export const collections = {
      docs: defineCollection({
        loader: docsLoader(),
        schema: docsSchema({ extend: videosSchema }),
      }),
    }

  4. Create your first page containing a video by creating a new .md or .mdx file defining a video in the frontmatter:

    src/content/docs/videos/getting-started.md
    ---
    title: My first video
    video:
      type: video
      link: https://www.youtube.com/watch?v=5u0Ds7wzUeI
      duration: 180
    ---
    

    ## My first video
    

    Welcome to my first video guide!

  5. Start the development server to preview your first video guide.

The Starlight Videos plugin supports different types of content from a basic video like a guide to a more complex collection of videos like a course.