サムネイルをクリックすると、モダールウィンドウでYouTube動画を表示

 <div id="column1">
	<ul class="gallery">
		<li class="modal-button"><img src="images/movie-thumb01.png" data-url="05NMZPHaU_o?si=ItFo_trls_FyY08C" alt""/></li>
		<li class="modal-button"><img src="images/movie-thumb02.png" data-url="pZkD_bl9noY?si=bAhG48XTTYzDOF79" alt""/></li>
		<li class="modal-button"><img src="images/movie-thumb03.png" data-url="3skpp5_QowM?si=7rx_UbrToJJH_YJY" alt""/></li>
	</ul>
</div>

#column1 {
    display: grid;
	align-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	background-repeat: no-repeat;
	background-position: 70% center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	background: #555;
}
.textcontent{
	opacity: 0;
	text-transform: uppercase;
}
.gallery{
	display: flex;
	margin: auto;	
}
.gallery li{
	width: 20vw;
	height: 20vw;
	max-width: 200px;
	max-height: 200px;
	overflow: hidden;
	list-style: none;
}
.gallery li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yt-modal {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
}
.yt-inner {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	min-width: 350px;
	position: fixed;
	border-radius: 5px;
	text-align: center;
	max-width: 1000px;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 30;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000
}
.yt-inner iframe {
  width: 100%;
  height: 100%;
}
.yt-modal .yt-inner img{
	width: 100%;
	height: auto;
}
.yt-closemodal{
	width: 50px;
	height: 50px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	cursor: pointer;
}
.yt-closemodal::after, .yt-closemodal::before{
	content: '';
	width: 30px;
	height:1px;
	top: 50%;
	left: 50%;
	background: #fff;
	position: absolute;
}
.yt-closemodal::after{
	transform: translate(-50%,-50%) rotate(45deg);
}
.yt-closemodal::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}

const ytModalButton = document.querySelectorAll('.modal-button');

ytModalButton.forEach((image)=>{
	image.addEventListener('click', (event) => {
	const ytModalElement = document.createElement('div');
	const youTubeUrl = event.target.dataset.url;
	//modalクラスを付与する
	ytModalElement.classList.add('yt-modal');
	//モダールウィンドウの内部要素を生成する
	const ytInnerElement = document.createElement('div');
	ytInnerElement.classList.add('yt-inner');
	ytInnerElement.innerHTML = `
		<iframe width="" height="" src="https://www.youtube.com/embed/${youTubeUrl}
" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	`;
	//クローズボタンを生成する
	const ytCloseElement = document.createElement('div');
	ytCloseElement.classList.add('yt-closemodal');  
	//body要素にモダールウィンドウを配置する
	document.body.appendChild(ytModalElement);
	document.body.appendChild(ytInnerElement);
	document.body.appendChild(ytCloseElement);
	//オープンモダールアニメーション
	const openModalKeyframes = {
		opacity: [0, 1]
	};
	const openModalOptions = {
		duration: 400,
		easing: 'ease',
		fill: 'forwards'
	};
	ytModalElement.animate(
		openModalKeyframes, openModalOptions
	);
	ytInnerElement.animate(
		openModalKeyframes, openModalOptions
	);
	ytCloseElement.animate(
		openModalKeyframes, openModalOptions
	);
	//クローズモダールアニメーション
	const closeModalKeyframes = {
		opacity: [1, 0]
	};
	const closeModalOptions = {
		duration: 400,
		easing: 'ease',
		fill: 'forwards'
	};
	function closeModalElement (){
		ytModalElement.animate(
			closeModalKeyframes, closeModalOptions
		);
		ytInnerElement.animate(
			closeModalKeyframes, closeModalOptions
		);
		ytCloseElement.animate(
			closeModalKeyframes, closeModalOptions
		);
		ytCloseElement.animate(
			{
				transform: ['translate(-50%,-50%) rotate(45deg)','translate(-50%,-50%) rotate(0deg)']
			},
			{
				duration: 400,
				pseudoElement: "::after",
				easing: 'ease',
			}
		);
		ytCloseElement.animate(
			{
				transform: ['translate(-50%,-50%) rotate(-45deg)','translate(-50%,-50%) rotate(-90deg)']
			},
			{
				duration: 400,
				pseudoElement: "::before",
				easing: 'ease',
			}
		);
		setTimeout( ()=> {
			ytCloseModalWindow(ytModalElement);
			ytCloseModalWindow(ytInnerElement);
			ytCloseModalWindow(ytCloseElement);
		}, 400)
	}
	//内部要素をクリックしたらモダールウィンドウを削除する処理
	ytModalElement.addEventListener('click', () => {
		closeModalElement ();
	});
	//内部要素をクリックしたらモダールウィンドウを削除する処理
	ytCloseElement.addEventListener('click', () => {
		closeModalElement ();
	});	  
  });
});

function ytCloseModalWindow(ytModalElement) {
	document.body.removeChild(ytModalElement)
}