モーダルが表示されずに困っております。

Question

やっていること

現在複数のYouTube動画をモーダルで表示するコードを書いております。
モーダルの表示と表示の際の自動再生と非表示の際の自動停止は実装出来ました。

解決したいこと

ロードした最初のタイミングのみ、ダブルクリックしないと
モーダルが開かず、YouTubeも再生されずに困っております。

どうぞよろしくお願いいたします。

ご教授のほどよろしくお願い申し上げます。
こちらに動くコード載せておりますので、お使いいただければと思います。
ただ、こちらだとモーダルを閉じた際の自動停止が効かずに困っています。
https://jsfiddle.net/eLgt4n67/6/

<ul class="k12_introduce-list">
        <li id="modal-trigger-1" class="k12_introduce-item"  data-videoid="js-modal-item-1">
            <img src="./images/video1.png" alt="">
        </li>
        <li id="modal-trigger-2" class="k12_introduce-item" data-videoid="js-modal-item-2">
            <img src="./images/video2.png" alt="">
        </li>
    </ul>
    <div class="k12_modal">
        <div id="msc_video_place" class="msc_video_place"></div>
        <ul class="modal__wrap">
            <li class="modal__list" id="js-modal-target-1" data-videoid="js-modal-item-1">
            <div class="btn-movie-close" id="js-movie-close-1">
                <div id="msc_videoIn js-modal-item-1" class="msc_btn"><img src="./images/close.png"" alt=""></div>
                <span class="btn-movie__bg"></span>
            </div>
            <div class="modal__target" id="js-modal-item-1" ></div>
            </li>
            <li class="modal__list" id="js-modal-target-2" data-videoid="js-modal-item-2">
            <div class="btn-movie-close" id="js-movie-close-2">
                <div id="msc_videoIn js-modal-item-1" class="msc_btn"><img src="./images/close.png"" alt=""></div>
                <span class="btn-movie__bg"></span>
            </div>
            <div class="modal__target" id="js-modal-item-2"></div>
            </li>
        </ul>
    </div>
</section>

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
    iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
    
    
    var ytPlayer = [];
    var ytData = [
    {
        id: 'FDMq9ie0ih0', 
        area: 'js-modal-item-1'
    },
    {
        id: 'UROr84HkgC0',
        area: 'js-modal-item-2'
    }
    ]
    
    function onYouTubeIframeAPIReady() {
        for (var i = 0; i < ytData.length; i++) {
            ytPlayer[ytData[i]['area']] = new YT.Player(ytData[i]['area'], {
            
            videoId: ytData[i]['id'],
            playerVars: {
                playlist: ytData[i]['id'], 
                rel: 0,
                showinfo: 0,
            }
            });
        }
    }
    var playYoutube = function () {
        var ytModals = document.querySelectorAll('.modal__wrap .modal__list');
        var ytList = Array.prototype.slice.call(ytModals, 0);
        
        ytList.forEach(function (li) {
            if (li.classList.contains('show')) {
            ytPlayer[li.dataset.videoid].playVideo();
            } else {
            ytPlayer[li.dataset.videoid].pauseVideo();
            }
    
        })
    }
    const modal = function(){
        
        const modalList = document.querySelectorAll('.k12_introduce-list > li');
        const modalPlayer = document.querySelector('.k12_modal');
        const modalVideos = document.querySelectorAll('.modal__wrap > li');
        const videoList = Array.prototype.slice.call(modalVideos, 0);
    
        const List = Array.prototype.slice.call(modalList, 0);
        List.forEach(function (item, index) {
            item.addEventListener('click', function() {
                modalPlayer.classList.add('show');
                videoList[index].classList.add('show');
                playYoutube();
            });
        })
        
        modalPlayer.addEventListener('click', function(){
            modalPlayer.classList.remove('show');
            for(let i = 0; i < modalVideos.length; i++){
                modalVideos[0].classList.remove('show');
                modalVideos[1].classList.remove('show');
                console.log(modalVideos[i]);
                playYoutube();
            }
        })
    }

    var introduceItems = document.querySelectorAll('.k12_introduce-item');
    var introduceItem = Array.prototype.slice.call(introduceItems,0);
    introduceItem.forEach(function (item, index){
        item.addEventListener('click', function (){
            modal();
        })
    });
    

.k12_introduce-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto; 
}

.k12_introduce-item {
  max-width: 350px;
  width: 100%;
  margin: 0 auto 30px;
  list-style: none;
}
.k12_introduce-item img {
  display: block;
  width: 100px;
  height: 100px;
  background-color: green;
  cursor: pointer; 
}
    
  
  .k12_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    visibility: hidden; }
  
  .modal__wrap {
    width: 100%;
    height: 100%;
    position: relative; }
  
  .modal__list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden; }
  
  .show {
    visibility: visible; }
  
  .msc_btn {
    position: absolute;
    top: -25px;
    right: -25px;
    z-index: 30000;
    color: #fff;
    width: 50px;
    height: 50px; }
    .msc_btn img {
      width: 100%;
      height: 100%; }
    @media screen and (max-width: 767px) {
      .msc_btn {
        top: initial;
        right: initial;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%); } }
  
  #js-modal-item-1 {
    width: 800px;
    height: 450px; }
    @media screen and (max-width: 991px) {
      #js-modal-item-1 {
        width: 90vw;
        height: 50vw; } }
  
  #js-modal-item-2 {
    width: 800px;
    height: 450px; }
    @media screen and (max-width: 991px) {
      #js-modal-item-2 {
        width: 90vw;
        height: 50vw; } }
  

Answer 1

introduceItem.forEachのクリックイベント内でmodalが呼ばれ更にクリックイベントがセットされていますね。

//introduceItem.forEach(function (item, index){
//        item.addEventListener('click', function (){
//            modal();
//        })
//    });
// 以下に変更
introduceItem.forEach(function (item, index){
        
   modal();
        
});

introduceItem.forEach内のクリックイベントを消してもいいのなら、上記ような形で１度目でmodal表示されるはずです。

Comments

[katopa165]

回答頂きありがとうございます！！
解決いたしました！

追加で質問よろしいでしょうか？
なぜforEach内のクリックイベントの記述を削除しても、クリックイベントのような動きになるのでしょうか？
また、なぜクリックイベントが記述してあると、ロード後のみイベントが動かないのでしょうか？
お忙しければ理解に必要な調べ方だけでも教えて頂けると幸いです。
どうぞよろしくお願い申し上げます。

[kensii]

解決したようで良かったです。
クリックイベントは記述しただけでは対象がクリックされるまで実行されません。
ですので、無理やり日本語にすると「クリックしたらplayyoutube()する関数をセットする関数、をクリックしたらセット」している状態です。

各イベントリスナー内に`console.log('hoge')`などを差し込んで動きを見てみるとわかると思います。

[katopa165]

丁寧な解説ありがとうございます！
console.log('hoge')やってみます１
質問に二回もお答えいただき、ありがとうございました！