@pro-laico/mux-video

Add the plugin to your Payload config

import { buildConfig } from 'payload'
import { muxVideoPlugin } from '@pro-laico/mux-video'

export default buildConfig({
  plugins: [muxVideoPlugin()],
})

This registers the mux-video collection (in the admin's Assets group) where uploaded videos live, and applies the upstream Mux plugin's fields to it. With your Mux credentials in place (see environment variables), editors can upload a video and Mux takes over encoding and streaming.

Set your Mux credentials

The plugin reads your Mux API token and webhook secret from the environment before buildConfig runs. Without MUX_TOKEN_ID and MUX_TOKEN_SECRET, the plugin logs a warning and uploads will fail, so set them before you start the app.

Add the video block to your pages

The package ships a VideoChild block that lets editors pick an uploaded Mux video and set playback options (autoplay, loop, muted, preload, plus a blurred poster frame). Register it through @pro-laico/atomic's child-blocks plugin so it renders inside your Atomic pages:

import { buildConfig } from 'payload'
import { childBlocksPlugin } from '@pro-laico/atomic/children'
import { Video } from '@pro-laico/mux-video/blocks/videoChild'

export default buildConfig({
  plugins: [
    childBlocksPlugin({ childBlocks: [Video] }),
    // ...other plugins
  ],
})

Render it on the frontend

You don't mount the player by hand. The block's renderer is registered with @pro-laico/atomic's child renderer, so once a page's blocks pass through RenderChildren, any VideoChild block automatically renders the Mux player:

// app/(frontend)/[...slug]/page.tsx
import { RenderChildren } from '@pro-laico/atomic/children/render'

export default async function Page({ page }) {
  return (
    <main>
      <RenderChildren blocks={page.children} />
    </main>
  )
}

Need the player component directly for a custom layout? It's available at @pro-laico/mux-video/blocks/videoChild/component as VideoChild, which mounts @mux/mux-video-react with the block's settings.

Add your Mux credentials

Copy the Mux keys into your .env (the template's .env.example lists them):

# .env (Mux credentials)
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
MUX_WEBHOOK_SIGNING_SECRET=

See environment variables for what each one is for.

Upload a video

In the admin's Assets group, open the mux-video collection and upload a video file. Mux handles encoding and streaming once it's uploaded.

Drop the video block on a page

Editing a page, add a Video block, pick the uploaded video, and set the playback options (autoplay, loop, muted, preload, and the blurred poster frame). The template renders it through the Atomic child renderer, so the Mux player shows up on the frontend with no extra wiring.