How To Use React Modal Video In Gatsby?

React Modal Video is the most popular video plugging in react. it is not affected by dom structure, Beautiful transition, accessible for keyboard navigation and screen readers, Rich options for Youtube API and Vimeo  API. It is totally user-friendly and easy to use and supports all browsers.

Step-1:  Install

npm install react-modal-video

Step-2:  Usage

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

Functional Implementation With Hooks

const App = () => {

    const [isOpen, setOpen] = useState(false)

    return (

        <>  
            <ModalVideo channel='youtube' 

                autoplay isOpen={isOpen} 

                videoId="pNje3bWz7V8" 

                onClose={() => 

                setOpen(false)} 
            />

<button className="build-play" onClick={()=> setOpen(true)}>Play Video</button>

        </>
    )
}
export default App;

* If You Want to Change the Video, You Change the Video 

Class Implementation :

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')
)

That’s all. If you have any queries, then let me know in the comment section.