Vertical Video Player

Preview
Code

VerticalVideoPlayer.jsx

"use client";

import { VideoPlayer } from "@/registry/react/blocks/video/VideoPlayer";

/** Portrait (9:16) variant of the video player example. */
export function VerticalVideoPlayer(props) {
  return <VideoPlayer vertical {...props} />;
}

Installation

npx @beyondwords/cli components add vertical-video-player

pnpm dlx @beyondwords/cli components add vertical-video-player

yarn dlx @beyondwords/cli components add vertical-video-player

bunx --bun @beyondwords/cli components add vertical-video-player

Usage

import { VerticalVideoPlayer } from '@/registry/react/blocks/video/VerticalVideoPlayer';

export function Player() {
  return <VerticalVideoPlayer projectId={54009} contentId="5ab6a5e1-689c-4103-962d-e7e68a4258ff" />;
}

VerticalVideoPlayer is the portrait variant of Video Player. Same controls and floating widget behavior, only the frame is 9:16 (480px tall). Use it for stories, Reels-style clips, or other vertical video.

Getting started

Components

Examples

Installation

Usage

​Installation

​Usage

Installation

Usage