How to Fix Playback ID Error when using Youtube API to display videos on a webserver?

Question

The Youtube player loads correctly, but the videos display a playback error when hitting play, and thumbnails do not load either. Could someone point out what I might be doing wrong.

$(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);
          });
      })
    }
  })

Answer 1

Try replacing your colons with braces.

e.g. $(item.id.videoId) to ${item.id.videoId}