import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { youtubeMock } from '../../../../mocks/product/overview/callToActions';
import VideoPlayer from '../VideoPlayer';

<Meta title="Atoms/Video Player" component={VideoPlayer} />

# VideoPlayer
<br />

## `VideoPlayers` are used to display the video player in an `iframe`.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: 800, height: 450 }}>
            <VideoPlayer title={youtubeMock.label} src={youtubeMock.iFrameFriendlyUrl} />
        </div>
    </Story>
</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} />
