I am trying to load the newest 5 videos to a carousel-like player. When I try to switch between videos I get this error:
Uncaught TypeError: cannot read property 'stopVideo' of undefined
It is happening because it cannot find the video.stopVideo() function from the 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.
$(document).ready(function() { $.get("https://youtube.googleapis.com/youtube/v3/search", { part: 'snippet', channelId: 'WC8s9GnPV_Ol-G9YKvxs4r-w', maxResults: 5, order: 'date', key: 'HIzaSyD8Fjhg8G-Q5xfQQUxyzJc_ikNSe4hK9SD' }, 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); }) } );});$(document).ready(function() { 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) { // Get the `.video` element inside each `.slide` var iframe = $(slide).find('.video')[0]; slide.video = new YT.Player(iframe); })}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}html { font-size: 16px; background-color: #000;}body { font-family: Arial, sans-serif; color: #fff; max-width: 600px; margin: 10px auto;}/* Additionnal styles */.video-slider { width: 100%; height: 20em; background: #444; position: relative; overflow: hidden;}.slide { position: absolute; top: 0; left: 100%; height: 100%; width: 100%; text-align: center; overflow: hidden;}.slide:first-child { left: 0;}.video { height: 100%; width: 100%; border: 0;}.slide-arrow { position: absolute; color: grey; top: 0; left: 0; height: 45%; width: 15%; cursor: pointer; opacity: .2;}.slide-arrow:hover { opacity: 1;}.slide-arrow:after { content: "\003c"; text-align: center; display: block; height: 10%; width: 100%; position: absolute; bottom: 0; left: 0; font-size: 3em;}.slide-arrow.right:after { content: "\003e";}.slide-arrow.right { left: auto; right: 0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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>
