I use Youtube api to show the videos on our playlist for our website.It worked well but after I delete the one video on the top of the playlist, no videos appear on the website.There is an error as below.
(index):331 Uncaught TypeError: Cannot read properties of undefined (reading 'url')at XMLHttpRequest.xhr.onreadystatechange ((index):331)
(index):331 is the following code.
json.items[i].snippet.thumbnails.default.url;
I think the browser can't find the url to show the thumbnails but I don't know how to fix it.
Anyone can help me, please?(I hide the apikey and playlistid)
var apikey = '************************'; var playlistid = '************************'; var maxresults = '8'; var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults='+ maxresults +'&playlistId='+ playlistid +'&key='+ apikey; var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); var html = ""; var thumbnail = ""; var videoid = ""; var title = ""; for (var i in json.items) { thumbnail = json.items[i].snippet.thumbnails.medium ? json.items[i].snippet.thumbnails.medium.url : json .items[i].snippet.thumbnails.default.url; videoid = json.items[i].snippet.resourceId.videoId; title = json.items[i].snippet.title; html +='<div class="col1-2_u"><div class="txtBox"><p>■ '+ title +'</p></div><div class="youtube"><div class="playButton"><span></span><img class="thumb" width="560" height="315" data-video="'+ videoid +'" src="'+ thumbnail +'"><img class="yt-bottombar" src="/medias/images/youtube-bottombar.png"></div><div id="ytplayer'+ videoid +'" class="player"></div></div></div>'; } document.getElementById('youtube').innerHTML = html; } }