ResponsiveVideo
React component that picks a video source based on responsive rules
Usage
To install it:
npm install --save @gluedigital/responsive-video
To use it:
import ResponsiveVideo, { ResponsiveSource } from '@gluedigital/responsive-video'
// ...
<ResponsiveVideo
className="video"
id="video-hero"
ref="video"
autoPlay muted playsInline loop>
<ResponsiveSource
src='/demo-mobile.mp4'
type="video/mp4; codecs=avc1.4D401E"
maxDeviceWidth={768} />
<ResponsiveSource
src='/demo-desktop.mp4'
type="video/mp4; codecs=avc1.4D401E" />
</ResponsiveVideo>Options
The following props can be used:
ResponsiveVideo
| Name | Type | Description |
|---|---|---|
| children | [ResponsiveSource] | One or more ResponsiveSource elements |
| poster | string | Default image |
ResponsiveSource
| Name | Type | Description |
|---|---|---|
| maxDeviceWidth | number | Maximum device width |
| minDeviceWidth | number | Minimum device width |
| maxWidth | number | Maximum window width |
| maxHeight | number | Maximum window height |
| poster | string | Default image |
Developing
This package uses nwb for the build. Take a look at their documentation for more info.
TL;DR: after installing nwb, just do npm start to open the dev environment.