Javascript, Youtube api, json

Hello,
I have put the Youtube videos on my website using Youtube api.
It worked well but after I deleted one of the videos on my playlist, the videos aren’t shown.

There is a following error.
Uncaught TypeError: Cannot read properties of undefined (reading ‘url’)
at XMLHttpRequest.xhr.onreadystatechange ((index):331)

(index):331) is as below.
thumbnail = json.items[i].snippet.thumbnails.medium ? json.items[i].snippet.thumbnails.medium.url : json.items[i].snippet.thumbnails.default.url;

Please anybody can help me?

I am a beginner of this forum.
If my topic is not appropriate, please let me know.

Thanks for your help.

All the script are here.

<script>
		let apikey = '***';
		let maxresults = '8';
		let playlistid = '***';
		let youtubeurl = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=' + maxresults +
			'&playlistId=' + playlistid + '&key=' + apikey;
		const xhr = new XMLHttpRequest();
		xhr.open('GET', youtubeurl);
		xhr.send();
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status === 200) {
				let json = JSON.parse(xhr.responseText);
				let html = "";
				let thumbnail = "";
				let videoid = "";
				let title = "";
				for (let 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>■&nbsp;' + 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;
			}
		}
</script>