ldcorreia
ldcorreia

Reputation: 39

Placing a videoID in an iframe using AJAX

I'm trying to display YT videos from one of my playlists through AJAX, but I can't really replace the videoID from an iframe with the data that I fetched.

I fetched my data like this:

const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`

const getData = function () {
 return fetch(url)
  	.then(response => response.json())
  	.then(data => {
    	return data.items.map(playlist => {
        return {
          videoId: playlist.snippet.resourceId.videoId
        }
      })
    })
}

and now I want to test if I can get one of the videoIds onto my iframe, so I tried to place it into one of my sections like this:

const playerTag = document.querySelector(".player")

const putVideoOn = function () {
  playerTag.innerHTML = ""
  playerTag.innerHTML = playerTag.innerHTML + `
		<div class="player-video">
			<iframe width="480" height="360" src="https://www.youtube.com/embed/${data.videoId}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
	`
}

// then I ran the function on load

putVideoOn()

But I always get an error saying that the variable I injected into my iframe link isn't defined.

Upvotes: 0

Views: 63

Answers (1)

johnchar
johnchar

Reputation: 547

I don't see data variable anywhere defined:

const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`

You are using ${data.videoId} in the URL in your putVideoOn function but I don't see where the data variable is defined.

You are just using it in your getData function like so:

return data.items.map(playlist => {
    return {
      videoId: playlist.snippet.resourceId.videoId
}

but you are not saving anything in the variable data because it doesn't exist probably

Upvotes: 1

Related Questions