0.3.3 • Published 5 years ago
Installation
yarn add react-sticky-video
Props
Basic Configuration
| Name | Type | Default | Description |
|---|
| url | string | undefined | The URL of the video to embed. (current supported source: file, Youtube, Dailymotion) |
| width | number | 640 | The width of the video's display area. |
| height | number | 360 | The width of the video's display area. |
| playerVars | object | -- | The object's properties identify player parameters that can be used to customize the player, more details are given below. |
| captions | array | [] | URLs for WebVTT caption files |
| originalControls | bool | false | Use original video controls UI. |
Example
File Source - Demo
Supported playerVars
| Name | Type | Default | Description |
|---|
| autoplay | bool | false | Specifies that the video will start playing as soon as it is ready |
| loop | bool | false | Specifies that the video will start over again, every time it is finished |
| muted | bool | false | Specifies that the audio output of the video should be muted |
import React from 'react';
import StickyVideo from 'react-sticky-video';
import 'react-sticky-video/dist/index.css';
const App = () => (
<StickyVideo
url="trailer_400p.ogg"
/>
);
Youtube - Demo
import React from 'react';
import StickyVideo from 'react-sticky-video';
import 'react-sticky-video/dist/index.css';
const App = () => (
<StickyVideo
url="https://www.youtube.com/watch?v=XXXXXXXXXXX"
/>
);
Dailymotion - Demo
import React from 'react';
import StickyVideo from 'react-sticky-video';
import 'react-sticky-video/dist/index.css';
const App = () => (
<StickyVideo
url="https://www.dailymotion.com/video/XXXXXXX"
/>
);
stickyConfig
| Name | Type | Default | Description |
|---|
| width | number | 320 | The width of the sticky video's display area. |
| height | number | 180 | The width of the sticky video's display area. |
| position | oneOf(['top-right', 'top-left', 'bottom-right', 'bottom-left']) | 'bottom-right' | The position of the sticky video |
Example - Demo
import React from 'react';
import StickyVideo from 'react-sticky-video';
import 'react-sticky-video/dist/index.css';
const App = () => (
<StickyVideo
url="XXXXXXXXXXX"
stickyConfig={
width: 480,
height: 270,
position: 'top-left',
}
/>
);
WebVTT Captions
Example - Demo
import React from 'react';
import StickyVideo from 'react-sticky-video';
import 'react-sticky-video/dist/index.css';
const App = () => (
<StickyVideo
url="https://youtu.be/Fkd9TWUtFm0"
captions={[
{
src: 'ted-en.vtt',
label: 'English',
default: true,
},
{
src: 'ted-zh-TW.vtt',
label: '中文',
},
]}
/>
);