JSFiddle - React, Tailwind, and code Playground

HTML

<button class="js-modal-btn" data-video-id="7TUOI23spt0">動画再生！</button>

CSS

@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-close{opacity:0}.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0, 100px);-moz-transform:translate(0, 100px);-ms-transform:translate(0, 100px);-o-transform:translate(0, 100px);transform:translate(0, 100px)}.modal-video-body{max-width:940px;width:100%;height:100%;margin:0 auto;display:table}.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal-video-movie-wrap...

JavaScript

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

/*!
 * modal-video Ver.1.0.0 (https://www.appleple.com)
 * Copyright appleple | MIT License
 *
 */
;(function umd(factory) {
	'use strict';

	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
		module.exports = factory(require('jquery'));
	} else {
		factory(jQuery);
	}
})(function modalVideo($) {

	var defaults = {
		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'
		},
		ratio: '16:9',
		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
		},
		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'
		}
	};

	function getQueryString(obj) {
		var url = "";
		for (var key in obj) {
			if (obj.hasOwnProperty(key))...