モーダルウィンドウでクリック時にiframeを作成したいです。

Question

javascript、jqueryでの実装経験が少なく調べながら進んでいたのですがつまづいてしまい、アドバイスいただけると嬉しいです。

iziModalというプラグインを使用しています。

##実現したいこと
・同一ページ内に複数存在するモーダルウィンドウがクリック表示される時にiframeタグを生成したい(データ属性の値をsrc=""のIDとして渡したい)
・モーダルウィンドウ表示の場合、モーダル内の動画を初期表示。モーダルウィンドウを非表示にする場合再生を停止(iframeを削除)

上記の処理を行いたいと思っております。

  .mv__content__item
    .mv__kv.izimodal-open(data-target="modal01")
    span タイトル
    p テキスト
    .mv__modal#modal01
      .mv__modal__video(data-video-id="===ID===")
      //- iframe.mv__modal__video(src="https://www.youtube.com/embed/===ID===" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen)
      .mv__modal__desc
        .video__intro
          span　タイトル
          p　テキスト

import $ from 'jquery';
import iziModal from 'izimodal';

/**
 * @constructor
 */

export default class Modal {
  constructor() {
    $.fn.iziModal = iziModal;
    this.dom = $(".mv__content")
    this.modalTriger = $(".izimodal-open")
    this.modalE();
  }

  modalE() {
    $(".mv__content").each(()=> {
        this.modalTriger.on("click",(e) => {
        e.preventDefault();
        this.target = this.modalTriger.data('target')
        this.modal = $(`#${this.target}`)
        this.modalVideo = $(".mv__modal__video")

        //iframeの作成
        this.modalVideo.append('<iframe src="https://www.youtube.com/embed/===ID===" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>')

        this.modal.iziModal("open")
      });
    });
    this.modalSetting();
  }
  modalSetting() {
    $(".mv__modal").iziModal({
      width: '100%',
      transitionIn: 'fadeInUp',
      transitionOut: 'fadeOutDown'
    });
  }
}

append()でモーダルの表示前に追加できるのでは？と思いましたが追加がされずとなっております。

アドバイスお願いしたいです。

Answer 1

import $ from 'jquery';
import iziModal from 'izimodal';

/**
 * @constructor
 */

export default class Modal {
  constructor() {
    $.fn.iziModal = iziModal;
    this.thumbBtn = $('.video-thumb');

    this.ClickEvent();
  }

  ClickEvent() {
    this.thumbBtn.on('click', (e) => {
      this.data = $(e.currentTarget).data('video');
      if (this.data === 'video-001') {
        e.preventDefault();
        $('#video001-detail').iziModal('open', this);
      }
      else {
        return false;
      }
    });
    $('#video001-detail').iziModal({
      iframe: true,
      iframeURL: 'https://www.youtube.com/embed/XFGcKY1SEm0?loop=1&playlist=XFGcKY1SEm0'
    });
  }
}

<div class="video">
  <span class="video-ttl">VIDEO TITLE</span>
  <div class="video-thumb" data-video="video-001"><img src="../img/modal-video-thumb.jpg" alt="" /></div>
  <div class="video-modal_detail" id="video001-detail">
    <div class="close-btn"><a data-izimodal-close="">×</a></div>
  </div>
</div>

モーダルをクリックした際にe.currentTargetで要素を取得して実現できました。