Javascript 如何在模板文本中正确输出数据url+；Youtube API

我正在尝试使用Youtube API将客户的Youtube视频拖到他们的网站上

我正在遍历返回的Youtube数据，并使用.append将视频详细信息输出到列表中。一切正常。。除了我似乎无法正确地将视频ID传递到数据url之外，当单击附加的列表元素时，它应该使用输出的数据url在模式内触发视频。它实际上正确地输出了ID，并且当检查元素时显示了正确的HTML，但是由于某些原因，链接没有触发模式

我看不出这与HTML、modal或Youtube API有什么关系，我已经使用JS测试了modal来输出数据URL，效果很好，这一定是与模板文本和变量的使用有关

我是JS新手，所以我猜我在某处犯了一个明显的错误

此处带条纹的背面代码笔（需要youtube API密钥）：

**“this works”链接是每次单击附加的youtube视频列表时应该发生的事情**

下面是基于Youtube API客户端库的my JS示例，我猜在注释-//create li元素之后不久会出现一个明显的错误：

function start() {
  gapi.client.setApiKey("YOUTUBE API KEY HERE");
  return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
    .then(function() { console.log("GAPI client loaded for API"); },
          function(err) { console.error("Error loading GAPI client for API", err); 
  }).then(function() {
    return gapi.client.youtube.playlistItems.list({
    "part": [
    "snippet,contentDetails,status"
    ],
    "playlistId": "UUljtM1wmjWYzFrEhB1LHy5Q",
    "maxResults": 3
    })
  }).then(function(response) {
    console.log(response.result);
    const data = response.result.items;
    
    resultsLoop(data);


  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
};

// 1. Load the JavaScript client library.
gapi.load('client', start);






// function that loops through Youtube videos and outputs them into a list

function resultsLoop(data) {
  
  var nodeLatestVidList = document.getElementById("latest-video-list");

  data.forEach(function(item, index) {
    
    var thumb = item.snippet.thumbnails.medium.url;
    var videoTitle = item.snippet.title; //.substring(0,70)
    var videoIds = item.snippet.resourceId.videoId;
    // var matchId
    
    // create li element
    var vidLiNode = document.createElement("LI");
    vidLiNode.className = "notif__item";
    vidLiNode.innerHTML = `
    
    <a class="notif__link flex padding-xs" href="#0" aria-controls="modal-video-iframe" data-url="https://www.youtube.com/embed/${videoIds}" role="button">
      <figure class="notif__figure margin-right-md color-primary" aria-hidden="true">
          <img src="${thumb}" alt="user picture">
      </figure>

      <div class="flex-grow margin-right-xs">

        <div class="padding-top-xxxxs">
          <p>Title ${videoTitle}</p>
          <p class="text-sm color-contrast-medium margin-top-xxxs"><time>12 hours ago</time></p>
        </div>
      </div>

      <div class="notif__dot margin-left-auto" aria-hidden="true"></div>
    </a>
    
    `
    nodeLatestVidList.append(vidLiNode)
 
  })
}

函数开始（）{
gapi.client.setApiKey（“此处为YOUTUBE API密钥”）；
返回gapi.client.load（“https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then（function（）{console.log（“为API加载的GAPI客户端”）；}，
函数（err）{console.error（“为API加载GAPI客户端时出错”，err）；
}).然后（函数（）{
返回gapi.client.youtube.playlitems.list({
“部分”：[
代码段、内容详细信息、状态
],
“播放ID”：“UULJTM1WMJWYZFREB1LHY5Q”，
“最大结果”：3
})
}).然后（功能（响应）{
console.log（response.result）；
常量数据=response.result.items；
结果循环（数据）；
}，功能（原因）{
console.log（'错误：'+原因.结果.错误.消息）；
});
};
// 1. 加载JavaScript客户端库。
gapi.load（'client'，start）；
//循环浏览Youtube视频并将其输出到列表中的函数
函数resultsLoop（数据）{
var nodeLatestVidList=document.getElementById（“最新视频列表”）；
data.forEach（函数（项、索引）{
var thumb=item.snippet.thumbnails.medium.url；
var videoTitle=item.snippet.title；//.substring（0,70）
var videoId=item.snippet.resourceId.videoId；
//变量匹配ID
//创建li元素
var vidLiNode=document.createElement（“LI”）；
vidLiNode.className=“notif\u项目”；
vidLiNode.innerHTML=`
`
nodeLatestVidList.append（vidLiNode）
})
}