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-video
Usage
import sass file to your project
@import 'node_modules/react-modal-video/scss/modal-video.scss';
Functional Implementation with Hooks
import React,{useState} from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'
const App = () => {
const [isOpen, setOpen] = useState(false)
return (
<React.Fragment>
<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId="L61p2uyiMSo" onClose={() => setOpen(false)} />
<button className="btn-primary" onClick={()=> setOpen(true)}>VIEW DEMO</button>
</React.Fragment>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
Class Implementation
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 (
<React.Fragment>
<ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
<button onClick={this.openModal}>Open</button>
</React.Fragment>
)
}
}
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' | |
mute | 0 | |
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 | |
custom | url | MP4 URL |
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' |