Video

Videos provide captivating multimedia content for your users.

Examples

Sintel Trailer

import React from 'react';
import ReactDOM from 'react-dom';
import { Video } from 'furl-components';

ReactDOM.render(
  <Video
    src="./wasp-movie.mp4"
    alt="Wasp Movie HD"
    withCaption
    height={400}
  />, 
  document.getElementById('root')
);

API

Video props
Property	Description	Type	Default
src	video source url	string
alt	video alternate text	string	'A video'
withCaption	render captioned figure	boolean	false
width	video with	int/string	'auto'
height	video height	int/string	'auto'
autoplay	start automatically	boolean	false
controls	display controls	boolean	true
loop	loop video	boolean	false
muted	mute audio	boolean	false

Notes

It is highly recommended you specify a descriptive value for alt to make your video accessible to screen-readers. This is why we already provide a default value instead of using an empty string or undefined.
If you provide withCaption, the component will render a <figure> and a <figcaption> accompanying the <video> element. The value of alt will be used for the <figcaption>.
width and height accept any valid CSS value, including CSS variables.
For more information on the <video> element itself, visit MDN Web Docs.