JavaScriptの.getAttribute()で複数のYouTube動画をモーダルで再生

let attribute = element.getAttribute(attributeName);

<img class="videoThumb" data-video-id="r0ieI2_LfmA" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="czqW-wlaZ-w" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="Wq6lAQrqY-k" src="" alt="Video Thumbnail">
<img class="videoThumb" data-video-id="aA8sRRbWT6c" src="" alt="Video Thumbnail">

document.addEventListener('DOMContentLoaded', (event) => {
    // videoThumbのclass名がつく要素を全取得
    let imgTags = document.getElementsByClassName('videoThumb');
    // ループ
    for(let i = 0; i < imgTags.length; i++) {
        let videoId = imgTags[i].getAttribute('data-video-id');
        imgTags[i].src = `https://img.youtube.com/vi/${videoId}/0.jpg`;
        imgTags[i].addEventListener('click', function() {
            openModal(videoId);
        });
    }

    // モーダルの要素を作成
    let modal = document.createElement('div');
    modal.id = 'modal';
    modal.style.display = 'none';
    modal.style.position = 'fixed';
    modal.style.zIndex = '3';
    modal.style.left = '0';
    modal.style.top = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.overflow = 'auto';
    modal.style.backgroundColor = 'rgba(0,0,0,0.4)';
    modal.addEventListener('click', function(event) {
        if(event.target === modal) {
            closeModal();
        }
    });
    // modalContentの要素を作成
    let modalContent = document.createElement('div');
    modalContent.className = 'modalContent';
    // iframeのYouTube要素を作成
    let videoPlayer = document.createElement('iframe');
    videoPlayer.id = 'videoPlayer';
    videoPlayer.width = '560';
    videoPlayer.height = '315';
    videoPlayer.frameBorder = '0';
    videoPlayer.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
    videoPlayer.allowFullscreen = true;
    // 閉じるボタンを作成
    let closeBtn = document.createElement('button');
    closeBtn.className = 'closeBtn';
    closeBtn.addEventListener('click', closeModal);

    modalContent.appendChild(videoPlayer);
    modalContent.appendChild(closeBtn);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
});
// モーダル関数
function openModal(videoId) {
    let modal = document.getElementById('modal');
    let videoPlayer = document.getElementById('videoPlayer');

    videoPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.style.display = 'block';
}
// モーダルを閉じる関数を作成
function closeModal() {
    let modalContent = document.querySelector('.modalContent');
    modalContent.style.animation = "fadeOut 0.7s";
    
    setTimeout(function() {
        let modal = document.getElementById('modal');
        let videoPlayer = document.getElementById('videoPlayer');

        videoPlayer.src = '';
        modal.style.display = 'none';
        //Reset the animation so it plays on the next open
        modalContent.style.animation = "fadeIn 0.7s";
    }, 700);
}

/* img.videoThumb のスタイル定義 */
img.videoThumb {
    cursor: pointer; /* マウスカーソルが画像の上に来たときに、ポインターに変更する */
}

/* img.videoThumb のホバー時のスタイル定義 */
img.videoThumb:hover {
    opacity: 0.8; /* マウスオーバー時に画像の透明度を80%に設定 */
}

/* .modalContent のスタイル定義 */
.modalContent {
    background-color: #fefefe; /* 背景色を設定 */
    margin: 15% auto; /* 上下のマージンを15%、左右のマージンを自動に設定 */
    padding: 0; /* パディングを設定 */
    border: 1px solid #888; /* 境界線の色と太さを設定 */
    animation: fadeIn 0.7s ease 0s 1 normal; /* アニメーションの名前、時間、タイミング関数、遅延時間、反復回数、方向を設定 */
    position: relative; /* 位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
    max-width: 600px; /* 最大幅を600pxに設定 */
}

/* .modalContent iframe のスタイル定義 */
.modalContent iframe {
    position: absolute; /* 絶対位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
}

/* button.closeBtn のスタイル定義 */
button.closeBtn {
    display: inline-block; /* ディスプレイプロパティをinline-blockに設定 */
    vertical-align: middle; /* 垂直方向の配置を中央に設定 */
    color: #FFF; /* 文字色を白に設定 */
    line-height: 1; /* 行の高さを1に設定 */
    width: 1.6rem; /* 幅を1.6remに設定 */
    height: 0.2rem; /* 高さを0.2remに設定 */
    background: currentColor; /* 背景色を現在の文字色に設定 */
    border-radius: 0.1rem; /* ボーダーの角を丸める */
    position: absolute; /* 絶対位置を設定 */
    transform: rotate(45deg); /* 要素を45度回転させる */
    border: none; /* ボーダーをなくす */
    right: -35px; /* 右から-35pxの位置に配置 */
    top: 7px; /* 上から7pxの位置に配置 */
    opacity: 0.6; /* 透明度を60%に設定 */
    transition: 0.2s ease-in-out; /* 0.2秒間でプロパティを変更し、変更の速度が先頭と末尾でゆっくりとなるように設定 */
}

/* button.closeBtn:before のスタイル定義 */
button.closeBtn:before {
    content: ''; /* 内容を空に設定 */
    position: absolute; /* 絶対位置を設定 */
    top: 0; /* 上から0の位置に配置 */
    left: 0; /* 左から0の位置に配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background: inherit; /* 背景色を親要素から継承 */
    border-radius: inherit; /* ボーダーの角を親要素から継承 */
    transform: rotate(90deg); /* 要素を90度回転させる */
}

/* button.closeBtn のホバー時のスタイル定義 */
button.closeBtn:hover {
    opacity: 1; /* マウスオーバー時に透明度を100%に設定 */
}

/* fadeIn アニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時点での透明度を0%に設定 */
    transform: translateY(30px); /* 開始時点での要素の位置をY軸方向に30px下に移動 */
  }
  100% {
    opacity: 1; /* 終了時点での透明度を100%に設定 */
  }
}

/* fadeOut アニメーションの定義 */
@keyframes fadeOut {
  0% {
    opacity: 1; /* 開始時点での透明度を100%に設定 */
  }
  100% {
    opacity: 0; /* 終了時点での透明度を0%に設定 */
    transform: translateY(60px); /* 終了時点での要素の位置をY軸方向に60px下に移動 */
  }
}