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

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

accessibility jquery vimeo youtube

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/appleple/modal-video
• Owner: appleple
• License: mit
• Created: 2017-02-02T02:06:41.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-12T06:06:43.000Z (over 1 year ago)
• Last Synced: 2024-04-14T23:59:38.410Z (7 months ago)
• Topics: accessibility, jquery, vimeo, youtube
• Language: JavaScript
• Homepage: https://appleple.github.io/modal-video/
• Size: 2.33 MB
• Stars: 267
• Watchers: 20
• Forks: 82
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Modal Video

Modal Video Library

## Features

- Not affected by dom structure.

- Beautiful transition

- Accessible for keyboard navigation and screen readers.

- Rich options for youtube API and Vimeo API

## Installation

- [npm](https://www.npmjs.com/package/modal-video)

- [standalone](https://raw.githubusercontent.com/appleple/modal-video/master/js/modal-video.js)

via npm

```shell

npm install modal-video --save

```

or yarn

```shell

yarn add modal-video

```

## Short Sample

### Basic

```html

Open Video

```

```js

new ModalVideo('.js-modal-btn');

```

### Vimeo

```html

Open Vimeo

```

```js

// import ModalVideo from 'modal-video';

new ModalVideo('.js-modal-btn', {channel: 'vimeo'});

```

### MP4

```html

Open Video

```

```js

new ModalVideo('.js-modal-btn');

```

OR

```html

Open Video

```

```js

new ModalVideo('.js-modal-btn', {url: 'https://developer.a-blogcms.jp/themes/developer/movies/280.mp4'});

```

## 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

	

	

		mute

		0

	

	

		origin

		null

	

	

		playlist

		null

	

	

		playsinline

		null

	

	

		rel

		0

	

	

		showinfo

		1

	

	

		start

		0

	

	

		wmode

		'transparent'

	

	

		theme

		'dark'

	

	

		nocookie

		false

	

	

		vimeo

		api

		false

	

	

		autopause

		true

	

	

		autoplay

		true

	

	

		byline

		true

	

	

		callback

		null

	

	

		color

		null

	

	

		controls

		true

	

	

		height

		null

	

	

		loop

		false

	

	

		maxheight

		null

	

	

		maxwidth

		null

	

	

		player_id

		null

	

	

		portrait

		true

	

	

		title

		true

	

	

		width

		null

	

	

		custom

		url

		MP4 URL

	

	

		xhtml

		false

	

	

		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'

	

## 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.