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

Supported playerVars

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

Supported playerVars

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: '中文',
      },
    ]}
  />
);