import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { youtubeMock } from '../../../../mocks/product/overview/callToActions';
import VideoPlayer from '../VideoPlayer';
import * as VideoPlayerStories from './VideoPlayer.stories';

<Meta of={VideoPlayerStories} />

# VideoPlayer

<br />

## `VideoPlayers` are used to display the video player in an `iframe`.

<br />

### YouTube

<Canvas>
  <Story of={VideoPlayerStories.YouTube} />
</Canvas>

### Vimeo

<Canvas>
  <Story of={VideoPlayerStories.Vimeo} />
</Canvas>

## Usage Example

```jsx
import VideoPlayer from '@appdirect/sfb-theme-components/src/atoms/video-player/VideoPlayer';

<VideoPlayer title="Youtube Player" src="//www.youtube.com/embed/q1BlEQknStM" />
```

## Props

<ArgsTable of={VideoPlayer} />
