I am trying to load the newest 5 videos to a carousel-like player, and however, When I try to switch between videos, I get this because it cannot find the video.stopVideo() function from Youtube API. This only happens when I try to load the videos by the API because when I try it with manually input videos, it works fine.
<script> $(document).ready(function(){ $.get("https://youtube.googleapis.com/youtube/v3/search",{ part: 'snippet', channelId: 'CHANNEL_ID', maxResults: 5, order: 'date', key: 'MY_KEY' }, function(data){ var output; $.each(data.items, function(i, item){ console.log(item); videoTitle = item.id.videoId; output = '<iframe class="video" src="https://www.youtube.com/embed/'+ videoTitle +'?ecver=2&enablejsapi=1"></iframe>'; let currentSlot = '#slide'+ (i+1); $(currentSlot).append(output); }) } ); var pos = 0, slides = $('.slide'), numOfSlides = slides.length; function nextSlide() { slides[pos].video.stopVideo(); console.log(slides[pos]); slides.eq(pos).animate({ left: '-100%' }, 500); pos = (pos >= numOfSlides - 1 ? 0 : ++pos); slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500); } function previousSlide() { slides[pos].video.stopVideo(); console.log(slides[pos]); slides.eq(pos).animate({ left: '100%' }, 500); pos = (pos == 0 ? numOfSlides - 1 : --pos); slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500); } $('.left').click(previousSlide); $('.right').click(nextSlide); function onYouTubeIframeAPIReady() { $('.slide').each(function (index, slide) { var iframe = $(slide).find('.video')[0] slide.video = new YT.Player(iframe) }) } });</script><div class="video-slider"><div class="slide" id="slide1"></div><div class="slide" id="slide2"></div><div class="slide" id="slide3"></div><div class="slide" id="slide4"></div><div class="slide" id="slide5"></div><div class="slide-arrow left"></div><div class="slide-arrow right"></div></div>