Javascript 如何修复使用Youtube API在Web服务器上显示视频时出现的播放ID错误？

Youtube播放器加载正确，但点击播放时视频显示播放错误，缩略图也不会加载。有人能指出我可能做错了什么吗

$(document).ready(function(){
    var API_KEY = ""; // Did not include API here but I have it included it my code
    var search = "soccer";
    var video = '';

    videoSearch(API_KEY, search);

    function videoSearch(API_KEY, search){

      $.get("https://www.googleapis.com/youtube/v3/search?key=" + API_KEY
        + "&type=video&part=snippet&maxResults=12&q=" + search, function(data){
          console.log(data);
          data.items.forEach(item => {
            video = `
            <iframe width="420" height="315" src="http://www.youtube.com/embed/$(item.id.videoId)" frameborder="0" allowfullscreen></iframe>
            `
            $("#videos").append(video);
          });
      })
    }
  })

$（文档）.ready（函数（）{
var API_KEY=”“//此处未包含API，但我已将其包含在我的代码中
var search=“soccer”；
var视频=“”；
视频搜索（API_键，搜索）；
功能视频搜索（API_键，搜索）{
$.get（”https://www.googleapis.com/youtube/v3/search?key=“+API_键
+“&type=video&part=snippet&maxResults=12&q=“+搜索，函数（数据）{
控制台日志（数据）；
data.items.forEach（item=>{
视频=`
`
$（“#视频”）。追加（视频）；
});
})
}
})

尝试用大括号替换冒号

---

例如$（item.id.videoId）到${item.id.videoId}

欢迎使用堆栈溢出。你能用你的代码创建JSFIDLE吗？解释问题？这解决了我的问题。非常感谢。