JSFiddle - React, Tailwind, and code Playground

HTML

<span class="youtube-link" youtubeid="yPu6qV5byu4">クリックで再生 ▶</span>

CSS

.grtyoutube-popup {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99999;
}

.grtyoutube-popup-content {
	margin-top:150px;
	width:95%;
	max-width:850px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

.grtyoutube-popup-close {
	position:absolute;
	top:-30px;
	right:0;
	color:#FFF;
	font-size:25px;
	width:17px;
	height:17px;
	cursor:pointer;
}

.grtyoutube-iframe {
	width:100%;
	height:480px;
}
@media (max-width:767px) {
	.grtyoutube-iframe {
		width:100%;
		height:350px;
	}
}

.grtyoutube-dark-theme{
	background: rgba(0,0,0, 0.85);
}

.grtyoutube-dark-theme .grtyoutube-popup-content {
	-webkit-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
	-moz-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
	box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
}

.grtyoutube-dark-theme .grtyoutube-popup-close {
	background: url('icon-close-white.png') no-repeat;
}

.grtyoutube-light-theme {
	background: rgba(255,255,255, 0.85);
}

.grtyoutube-light-theme .grtyoutube-popup-content {
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
}

.grtyoutube-light-theme .grtyoutube-popup-close {
	background: url('icon-close-black.png') no-repeat;
}

JavaScript

/*!
 * GRT Youtube Popup - jQuery Plugin
 * Version: 1.0
 * Author: GRT107
 *
 * Copyright (c) 2017 GRT107
 * Released under the MIT license
*/

(function ( $ ) {

	$.fn.grtyoutube = function( options ) {

		return this.each(function() {

			// Get video ID
			var getvideoid = $(this).attr("youtubeid");

			// Default options
			var settings = $.extend({
				videoID: getvideoid,
				autoPlay: true,
				theme: "dark"
			}, options );

			// Convert some values
			if(settings.autoPlay === true) { settings.autoPlay = 1 } else if(settings.autoPlay === false)  { settings.autoPlay = 0 }
			if(settings.theme === "dark") { settings.theme = "grtyoutube-dark-theme" } else if(settings.theme === "light")  { settings.theme = "grtyoutube-light-theme" }

			// Initialize on click
			if(getvideoid) {
				$(this).on( "click", function() {
					 $("body").append('<div class="grtyoutube-popup '+settings.theme+'">'+
								'<div class="grtyoutube-popup-content">'+
									'<span class="grtyoutube-popup-close"></span>'+
									'<iframe class="grtyoutube-iframe" src="https://www.youtube.com/embed/'+settings.videoID+'?rel=0&wmode=transparent&autoplay='+settings.autoPlay+'&iv_load_policy=3" allowfullscreen frameborder="0"></iframe>'+
								'</div>'+
							'</div>');
				});
			}

			// Close the box on click or escape
			$(this).on('click', function (event) {
				event.preventDefault();
				$(".grtyoutube-popup-close, .grtyoutube-popup").click(function(){
					$(".grtyoutube-popup").remove();
				});
			});

			$(document).keyup(function(event) {
				if (event.keyCode == 27){
					$(".grtyoutube-popup").remove();
				}
			});
		});
	};

}( jQuery ));

$(".youtube-link").grtyoutube();