react-modal-video

React Modal Video Component

Features

- Not affected by dom structure.
- Beautiful transition
- Accessible for keyboard navigation and screen readers.
- Rich options for youtube API and Vimeo API

Demo

https://unpkg.com/react-modal-video@latest/test/index.html

Install

$3

``sh
npm install react-modal-video
`

Usage

import sass file to your project

`scss
@import 'node_modules/react-modal-video/scss/modal-video.scss';
`

$3

`jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ModalVideo from 'react-modal-video';

const App = () => {
const [isOpen, setOpen] = useState(false);

return (

channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="L61p2uyiMSo"
onClose={() => setOpen(false)}
/>
setOpen(true)}>
VIEW DEMO


);
};

ReactDOM.render(, document.getElementById('root'));
`

$3

change "isOpen" property to open and close the modal-video

`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ModalVideo from 'react-modal-video';

class App extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
};
this.openModal = this.openModal.bind(this);
}

openModal() {
this.setState({ isOpen: true });
}

render() {
return (

channel="youtube"
isOpen={this.state.isOpen}
videoId="L61p2uyiMSo"
onClose={() => this.setState({ isOpen: false })}
/>
Open

);
}
}

ReactDOM.render(, document.getElementById('root'));
`

Options

- About YouTube options, please refer to https://developers.google.com/youtube/player_parameters?hl=en
- About Vimeo options, please refer to https://developer.vimeo.com/apis/oembed

FAQ

$3

1. Enable JS API. Turn enablejsapi property to 1.
2. Load YouTube Iframe API. Add ` in HTML file.

Licence

MIT