https://framer.com/m/VideoPro2-vfkv.js

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / Enhancements / CustomVideoPlayer

CustomVideoPlayer

CustomVideoPlayer plays uploads, direct URLs, YouTube or Vimeo behind one set of controls you style yourself, with chapters and accessibility settings of its own.

Enhancements17 controlsfour sourceschapters

Examples

Live specimens for every control the component exposes.

Setup

Four arrays cover the sources — uploaded files, direct URLs, YouTube ids and Vimeo ids — so one player can carry a playlist from more than one place. manualChapters adds a chapter list over the timeline.

0:00 / 0:00

Playback

showControls swaps between the styled controls and none at all. loop and autoPlay behave as they do natively, which means autoplay needs the track muted in most browsers.

controls on

0:00 / 0:00

controls off

looping

0:00 / 0:00

Appearance

The style groups cover the frame, the control bar, the play overlay and its glow. useCustomPlayButton replaces the built-in play affordance with your own.

default overlay

0:00 / 0:00

custom play button

0:00 / 0:00

autoplay

0:00 / 0:00

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
sourceType	enum	file · url · youtube · vimeo. Picks which source field below applies.
mode	enum	single · playlist. One video, or a list the player steps through.
videoFile	file	Uploaded video file.
videoUrl	string	Direct URL to the video file.
youtubeId	string	YouTube URL or bare video id.
vimeoId	string	Vimeo video id.
videoFiles	array	Uploaded video files.
videoUrls	array	Direct video addresses.
youtubeIds	array	YouTube ids to play.
vimeoIds	array	Vimeo ids to play.
showControls	boolean	Shows the styled control bar.
controlsMode	enum	default · minimal. Full control bar, or a pared-back one.
loop	boolean	Repeats the track.
autoPlay	boolean	Starts on load. Browsers require the track muted.
manualChapters	array	Chapter marks over the timeline.
chaptersMode	enum	embedded · external. Chapters in the timeline, or driven from outside.
controls	object	Which controls appear in the bar.
posterImage	image	Still shown before playback starts.
accessibility	object	Captions and keyboard behaviour.
style	object	Frame, radius and fill of the player.
controlsStyle	object	Look of the control bar.
defaultSettings	object	Starting volume, speed and quality.
useCustomPlayButton	boolean	Uses your own play affordance.
customPlayButton	slot	Any canvas layer used as the play button.
showPlayButtonOnlyOnInitial	boolean	Shows that button only before the first play.
playOverlay	object	Look of the overlay before playback.
buttonStyle	object	Look of the play button.
glow	object	Glow behind the player.

Prop	Type	Behaviour
sourceType	enum	file · url · youtube · vimeo. Picks which source field below applies.
mode	enum	single · playlist. One video, or a list the player steps through.
videoFile	file	Uploaded video file.
videoUrl	string	Direct URL to the video file.
youtubeId	string	YouTube URL or bare video id.
vimeoId	string	Vimeo video id.
videoFiles	array	Uploaded video files.
videoUrls	array	Direct video addresses.
youtubeIds	array	YouTube ids to play.
vimeoIds	array	Vimeo ids to play.
showControls	boolean	Shows the styled control bar.
controlsMode	enum	default · minimal. Full control bar, or a pared-back one.
loop	boolean	Repeats the track.
autoPlay	boolean	Starts on load. Browsers require the track muted.
manualChapters	array	Chapter marks over the timeline.
chaptersMode	enum	embedded · external. Chapters in the timeline, or driven from outside.
controls	object	Which controls appear in the bar.
posterImage	image	Still shown before playback starts.
accessibility	object	Captions and keyboard behaviour.
style	object	Frame, radius and fill of the player.
controlsStyle	object	Look of the control bar.
defaultSettings	object	Starting volume, speed and quality.
useCustomPlayButton	boolean	Uses your own play affordance.
customPlayButton	slot	Any canvas layer used as the play button.
showPlayButtonOnlyOnInitial	boolean	Shows that button only before the first play.
playOverlay	object	Look of the overlay before playback.
buttonStyle	object	Look of the play button.
glow	object	Glow behind the player.

Usage

Guidance carried over from the component definition.

Reach for CustomVideoPlayer

One player must handle uploads, YouTube and Vimeo alike.

The control bar has to match the site rather than the browser.

The video is long enough to need chapters.

The player must look the same whatever the source is.

Reach for something else

The video should scrub with the scroll — use ScrollVideoPlayer.

A plain embed would do — use the Video component.

The footage is decorative background; a player is too much.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.