---
title: VideoPlayer
description: >-
  A video player component built on Video.js with a play/pause UI overlay, and
  programmatic playback control
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​Playercomponent

A video player component built on Video.js with a play/pause UI overlay, and programmatic playback control

### Examples

* #### VideoPlayer

  ##### Default

  ```tsx
  import {VideoPlayer} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handlePlay = () => {
      console.log('Video started playing')
    }

    const handlePause = () => {
      console.log('Video paused')
    }

    const handleEnded = () => {
      console.log('Video ended')
    }

    return (
      <VideoPlayer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://picsum.photos/400/225"
        height={225}
        onPlay={handlePlay}
        onPause={handlePause}
        onEnded={handleEnded}
      />
    )
  }
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/shop-minis/VideoPlayer.png)

## Examples

VideoPlayer configurations and features

Basic video player

A basic video player with a fixed height and poster image

Imperative controls

Video player with imperative controls

### Examples

* #### Basic video player

  ##### Description

  A basic video player with a fixed height and poster image

  ##### Default

  ```tsx
  import {VideoPlayer} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handlePlay = () => {
      console.log('Video started playing')
    }

    const handlePause = () => {
      console.log('Video paused')
    }

    const handleEnded = () => {
      console.log('Video ended')
    }

    return (
      <VideoPlayer
        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        poster="https://picsum.photos/400/225"
        height={225}
        onPlay={handlePlay}
        onPause={handlePause}
        onEnded={handleEnded}
      />
    )
  }
  ```

* #### 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<VideoPlayerRef>(null)

    return (
      <div>
        <VideoPlayer
          ref={ref}
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          width={400}
          height={225}
        />
        <div style={{marginTop: '10px', display: 'flex', gap: '10px'}}>
          <Button onClick={handlePlay}>Play</Button>
          <Button onClick={handlePause} variant="secondary">
            Pause
          </Button>
        </div>
      </div>
    )
  }
  ```