https://github.com/appleple/react-modal-video

Accessible React Modal Video Component
https://github.com/appleple/react-modal-video

accessibility es6 modal react ui-components vimeo youtube

Last synced: 4 days ago
JSON representation

Accessible React Modal Video Component

• Host: GitHub
• URL: https://github.com/appleple/react-modal-video
• Owner: appleple
• License: mit
• Created: 2017-01-20T10:01:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-28T05:53:16.000Z (over 1 year ago)
• Last Synced: 2024-04-14T12:36:36.790Z (9 months ago)
• Topics: accessibility, es6, modal, react, ui-components, vimeo, youtube
• Language: JavaScript
• Homepage: https://appleple.github.io/react-modal-video/
• Size: 2.61 MB
• Stars: 174
• Watchers: 10
• Forks: 85
• Open Issues: 29
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

[https://unpkg.com/react-modal-video@latest/test/index.html](https://unpkg.com/react-modal-video@latest/test/index.html)

## Install

### npm

```sh

npm install react-modal-video

```

## Usage

import sass file to your project

```scss

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

```

### Functional Implementation with Hooks

```jsx

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

import ModalVideo from 'react-modal-video';

const App = () => {

  const [isOpen, setOpen] = useState(false);

  return (

    

       setOpen(false)} 

			/>

       setOpen(true)}>

        VIEW DEMO

      

    

  );

};

ReactDOM.render(, document.getElementById('root'));

```

### Class Implementation

change "isOpen" property to open and close the modal-video

```jsx

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 (

      

         this.setState({ isOpen: false })}

        />

        Open

      

    );

  }

}

ReactDOM.render(, 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 / 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 by GA4?

1. Enable JS API. Turn `enablejsapi` property to `1`.

2. Load YouTube Iframe API. Add `` in HTML file.

## Licence

[MIT](https://github.com/appleple/modal-video.js/blob/master/LICENSE)