---
title: VideoPlayer
description: >-
Video.js-powered player with automatic format handling. Includes custom
play/pause overlay and imperative controls via ref (for advanced scenarios
like synchronized playback). Video.js handles codec support, adaptive
streaming, and disposal lifecycle automatically.
api_name: shop-minis
source_url:
html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/videoplayer'
md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/videoplayer.md'
---
# Video​Player
Video.js-powered player with automatic format handling. Includes custom play/pause overlay and imperative controls via ref (for advanced scenarios like synchronized playback). Video.js handles codec support, adaptive streaming, and disposal lifecycle automatically.
## Props
* **src**
**string**
**required**
The video source URL
* **autoplay**
**boolean**
Whether the video should autoplay
* **format**
**string**
The format/MIME type of the video (default: 'video/mp4')
* **height**
**number**
Video height in pixels
* **loop**
**boolean**
Whether the video should loop
* **muted**
**boolean**
Whether the video should be muted
* **onEnded**
**() => void**
Callback when video ends
* **onPause**
**() => void**
Callback when video is paused
* **onPlay**
**() => void**
Callback when video starts playing
* **onReady**
**() => void**
Callback when video player is ready
* **playButtonComponent**
**React.ReactNode**
Custom play button component
* **poster**
**string**
URL for the poster image shown before playback
* **preload**
**'none' | 'metadata' | 'auto'**
Preload behavior: 'none', 'metadata', or 'auto'
* **width**
**number**
Video width in pixels
Examples
## Preview
### Examples
* #### VideoPlayer
##### Default
```tsx
import React from 'react'
import {VideoPlayer} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
)
}
```
* #### Basic video player
##### Description
A basic video player with a fixed height and poster image
##### Default
```tsx
import React from 'react'
import {VideoPlayer} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
)
}
```
* #### Imperative controls
##### Description
Video player with imperative controls
##### Default
```tsx
import {useRef} from 'react'
import {VideoPlayer, Button, VideoPlayerRef} from '@shopify/shop-minis-react'
export default function MyComponent() {
const handlePlay = () => {
ref.current?.play()
}
const handlePause = () => {
ref.current?.pause()
}
const ref = useRef(null)
return (
)
}
```