Nomenclature Processing Machine

    react-modal-video
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-modal-video package

    1.2.9 • Public • Published

    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

    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 / iframe 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 opened the modal video'
    dismissBtnMessage 'Close the modal by clicking here'

    FAQ

    How to track YouTube videos playing in modal-video with Google Tag Manager?

    1. Enable JS API. Turn enablejsapi property to 1.
    2. Load YouTube Iframe API. Add <script src="https://www.youtube.com/iframe_api"></script> in HTML file.

    Licence

    MIT

    Keywords

    none

    Install

    npm i react-modal-video

    DownloadsWeekly Downloads

    21,953

    Version

    1.2.9

    License

    MIT

    Unpacked Size

    1.27 MB

    Total Files

    18

    Last publish

    Collaborators

    • appleple