next-modal-video
v2.0.3
Published
Modal Video Viewer
Downloads
6
Readme
next-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
Install
npm
npm install next-modal-video
Usage
import sass file to your project
@import 'node_modules/next-modal-video/scss/modal-video.scss';
Functional Implementation with Hooks
import React,{useState} from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'next-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 'next-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
FAQ
How to track YouTube videos playing in modal-video by GA4?
- Enable JS API. Turn
enablejsapi
property to1
. - Load YouTube Iframe API. Add
<script src="https://www.youtube.com/iframe_api"></script>
in HTML file.
Licence
[MIT]