Youtube Video Iframe API load Multiple videos in a page with different video ID

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

/*Video POPUP CSS*/

.playBtn {
    width: 100px;
    height: 100px;
    background-size: 100%;
    display: block;
    border: 10px red;
    position: absolute;
    left: calc(50% - 50px);
    z-index: 1;
    bottom: 40%;
    background-repeat: no-repeat;
}

.modal-video {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.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;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: modal-video;
    animation-name: modal-video;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}

.modal-video {
    display: none;
}

.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: #000;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: modal-video-inner;
    animation-name: modal-video-inner;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    max-width: 95%;
    margin: 0 auto;
}

.modal-video-close-btn {
    position: absolute;
    z-index: 2;
    top: -35px;
    right: 0px;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent;
}

.modal-video-movie-wrap video,
.modal-video-movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<script>

$(document).ready(function(){
    /* Video Popup for youtube video */

    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
})

function onYouTubeIframeAPIReady() {
 
    // vid_id = $('.modal-video-movie-wrap').attr('data-videoid');
 
    player = new YT.Player('player', {
        height: '230',
        width: '100%',
        playerVars: { 'autoplay': 0, 'controls': 0 },
        // videoId: vid_id,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    // event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        // setTimeout(stopVideo, 6000);
        done = true;
    }
}

function stopVideo() {
    player.stopVideo();
}



$(document).ready(function(){

    // Play Icon shwo video Popup stop and pause
    var sameVid_id = $(".modal-video-movie-wrap").attr('data-videoid');

    $('.playBtn, .youtube-video_btn').click(function(e){
        e.preventDefault();
        $('.playBtn, .youtube-video_btn').removeClass('active');
        $(this).addClass('active');



        vid_id = $(this).attr('data-videoid');
        if(vid_id != sameVid_id) {
            $(".modal-video-movie-wrap").attr('data-videoid',vid_id);
            player.loadVideoById(vid_id, 5, "large")
        } else {
            console.log(sameVid_id);
            $(".modal-video-movie-wrap").attr('data-videoid',sameVid_id);
        }

        $('.modal-video').show();
        player.playVideo();

        sameVid_id = vid_id;

    });

    $('.modal-video-close-btn, .modal-video, #player.iframe').click(function(e){

        // Youtube video Pause
        player.pauseVideo();

        $('.modal-video').hide();
    });
});

</script>

<a class="youtube-video_btn" data-videoid="CQP4J6S3w14">Video 1</a>
 <a class="youtube-video_btn" data-videoid="l-iEI4NrRcU">Video 2</a>

<a class="youtube-video_btn" data-videoid="TtjPwH8hSEg">Video 3</a>

<div class="modal-video" tabindex="-1" role="dialog" aria-label="You just openned the modal video" id="JR1DT8LJGUV5Y">

        <div class="modal-video-body">

            <div class="modal-video-inner">

                <div class="modal-video-movie-wrap" style="padding-bottom:56.25%">

                    <button class="modal-video-close-btn js-modal-video-dismiss-btn" aria-label="Close the modal by clicking here"></button>

                    <div id="player"></div>

                    <!-- <video width="460" data-video="true" controls="true" height="230" loop="loop" class="popupVideo" poster="/wp-content/uploads/2018/11/slider-1-min.jpg"><source src="<?php // the_sub_field('video_popup_file'); ?>" type="video/mp4"></video> -->

                </div>

            </div>

        </div>

    </div>

Video 1

Video 2

Video 3