Использование YouTube Modal в Datatable

Question

Я пытаюсь заставить модальное всплывающее окно YouTube работать в созданном мной Datatable, который извлекает информацию с сайта SharePoint и будет развертываться с помощью SPFX. Я получил код, работающий по большей части правильно, но всякий раз, когда я пытаюсь запустить Datatable, модальное окно не появляется. Я заглянул в консоль Javascript, и она правильно подтягивает ссылки.

Я считаю, что проблема в моем JS, поскольку модальный режим запущен до завершения моего вызова ajax. Но я не совсем уверен, что это проблема.

Вот HTML / CSS

`
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
    .video_link i {
      color: red;
      cursor: pointer;
    }

    </style>

    Industry <select id="IndustrySelect">
        <option value="">No Filter Selected</option>
         <option value="All Industries">All Industries</option>
         <option value="Agriculture">Agriculture</option>
         <option value="Automotive">Automotive</option>
         <option value="Banking/Finance">Banking/Finance</option>
         <option value="Communications">Communications</option>
         <option value="Construction">Construction</option>
         <option value="Dentistry">Dentistry</option>
         <option value="Education">Education</option>
         <option value="Entertainment">Entertainment</option>
         <option value="Restaurant/Bar">Restaurant/Bar</option>
         <option value="Grocery">Grocery</option>
         <option value="Home Services">Home Services</option>
         <option value="Legal">Legal</option>
         <option value="Medical/Health">Medical/Health</option>
         <option value="Non-Profit">Non-Profit</option>
         <option value="Political / Government">Political / Government</option>
         <option value="Real Estate">Real Estate</option>
         <option value="Recruitment">Recruitment</option>
         <option value="Retail">Retail</option>
         <option value="Senior Living">Senior Living</option>
         <option value="Tourism">Tourism</option>
         <option value="Unions / Associates">Unions / Associates</option>
         <option value="Utilities">Utilities</option>
         <option value="Waste Removal">Waste Removal</option>
     </select>

     VideoType <select id="VideoSelect">
         <option value="">No Filter Selected</option>
         <option value="Spot/Video">Spot/Video</option>
         <option value="Longform">Longform</option>
         <option value="FB Live">FB Live</option>
         <option value="Special">Special</option>
      </select>
      

    <table id="video-table" class="display ${styles.creativesDatatable} table table-sm table-hover" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Video</th>
          <th>Title</th>
          <th>Description</th>
          <th>Industry</th>
          <th>Video Type</th>
        </tr>
      </thead>
    </table>
    <div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
  
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" id="video-frame" allowscriptaccess="always" allow="autoplay"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>`;

Вот его JS часть:

var $videoSrc = null;
    let theUrl = `https://ewscripps.sharepoint.com/sites/lighthouseideas/_api/web/lists/getbytitle('CREATIVES')/items?$top=1000&$select=FileRef,FileLeafRef,Title,Industry,Description,VideoType,Link`
    let dTable = $('#video-table', this.domElement).DataTable({
      'ajax': {
        'url': theUrl,
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        'dataSrc': (data: { value: IVideoItem[] }): any[][] => {
          return data.value.map((item: IVideoItem): any[] => {
            let industryVal;
            let descriptionVal;
            if(null == item.Description)
            {
              descriptionVal="n/a";
            }
            else{
              descriptionVal=item.Description.substr(0,125);
            }
            if(null == item.Industry)
            {
              industryVal="n/a";
            }
            else{
              industryVal=item.Industry.toString().split(",").join(", ");
            }
            return [
              $('<a>', { id : item.Link, class : 'video_link' })
              .attr('data-toggle', 'modal')
              .attr('data-src', `https://www.youtube.com/embed/${item.Link}`)
              .attr('data-target', '#video-modal')
              .append($('<i>').addClass('fab fa-youtube'))[0].outerHTML,
              item.Title,
              descriptionVal,
              industryVal,
              item.VideoType
            ];
          });
        },
      }
    });

      $('.video_link').click(function(e) {
        $videoSrc = $(this).data('src'); // Update the video source
      });
      
      $('#video-modal').on('shown.bs.modal', function(e) {
        $("#video-frame").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
      });
      
      $('#video-modal').on('hide.bs.modal', function(e) {
        $("#video-frame").attr('src', $videoSrc);
      });

    
    //Need to be in function to run after ajax call is finished
    //Asynchronous

  let industrySelect= document.getElementById('IndustrySelect');
    industrySelect.addEventListener("change", e => {
    let val=$("#IndustrySelect option:selected").val();
    dTable.column(3).search(val).draw();
  });


  let vidSelect= document.getElementById('VideoSelect');
    vidSelect.addEventListener("change", e => {
    let val=$("#VideoSelect option:selected").val();
    dTable.column(4).search(val).draw();
});

  }