react-vimeo-placeholder

React custom vimeo player placeholder

Embed Vimeo player with a custom placeholder image and play button

Example

import Vimeo from 'react-vimeo-placeholder';
import 'react-vimeo-placeholder/dist/style.css';
 
const MyComponent = () => {
  return <Vimeo
    id="87008050"
    hoverAnimation="backgroundScale"
    highlightColor="rgba(50,100,150,0.5)"
    borderColor="rgba(150,200,250,0.8)"
    playButtonShape="circle"
  />;
}

Options

Name	Type	Default	Description
borderColor	string	#fff	Play button border color
hoverAnimation	string	-	Hover animation - accepts arrowScale, backgroundScale or fade
highlightColor	string	rgba(0,0,0,.6)	Highlight color
mini	boolean	false	Small play button
playButtonArrow	string	light	Play button color - accepts dark or light
playButtonShape	string	square	Play button shape - accepts circle, square or rounded-square
showTitle	boolean	true	Show or hide video title

Browser Support

• Chrome
• Firefox
• Internet Explorer 10 +
• Opera