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
http://rawgit.com/appleple/react-modal-video/master/test/
Install
npm
npm install react-modal-videoUsage
import sass file to your project
@import 'node_modules/react-modal-video/scss/modal-video.scss';change "isOpen" property to open and close the modal-video
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 ( <div> <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} /> <button onClick={this.openModal}>Open</button> </div> ) } } ReactDOM.render( <App />, 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
| properties | default | |
|---|---|---|
| channel | 'youtube' | |
| youtube | autoplay | 1 |
| cc_load_policy | 1 | |
| color | null | |
| controls | 1 | |
| disablekb | 0 | |
| enablejsapi | 0 | |
| end | null | |
| fs | 1 | |
| h1 | null | |
| iv_load_policy | 1 | |
| list | null | |
| listType | null | |
| loop | 0 | |
| modestbranding | null | |
| origin | null | |
| playlist | null | |
| playsinline | null | |
| rel | 0 | |
| showinfo | 1 | |
| start | 0 | |
| wmode | 'transparent' | |
| theme | 'dark' | |
| vimeo | api | false |
| autopause | true | |
| autoplay | true | |
| byline | true | |
| callback | null | |
| color | null | |
| height | null | |
| loop | false | |
| maxheight | null | |
| maxwidth | null | |
| player_id | null | |
| portrait | true | |
| title | true | |
| width | null | |
| xhtml | false | |
| youku | autoplay | 1 |
| show_related | 0 | |
| ratio | '16:9' | |
| allowFullScreen | true | |
| animationSpeed | 300 | |
| classNames | modalVideo | 'modal-video' |
| modalVideoClose | 'modal-video-close' | |
| modalVideoBody | 'modal-video-body' | |
| modalVideoInner | 'modal-video-inner' | |
| modalVideoIframeWrap | 'modal-video-movie-wrap' | |
| modalVideoCloseBtn | 'modal-video-close-btn' | |
| aria | openMessage | 'You just openned the modal video' |
| dismissBtnMessage | 'Close the modal by clicking here' | |
