title: Carousel Slider with YouTube videos
body: <p>Is it possible to use JQuery to build a youtube video slider? I'd like to display a few ones I uploaded.</p>
  
  <p>Found some answers but made with specific frameworks, if it's possible I'd like to stick with something simple.</p>
  
  <p>I found this code very helpful but I can't seem to make it work. </p>
  
  <p><a href="http://jsfiddle.net/mb4vgn60/" rel="noreferrer">JSFiddle</a></p>
  
  <pre><code>$('.play-button').on('click', function () {
      $(this).hide();
      $(this).parent().fadeOut();
      $(this).parent().siblings('.slider-video')[0].play();
  });
  
  $('.slider-video').on('play', function () {
      $(this).attr('controls', '1');
  });
  
  // Additionnal code for the slider
  var pos = 0,
      slides = $('.slide'),
      numOfSlides = slides.length;
  
  function nextSlide(){
      stopCurrentVideo();
      slides.eq(pos).animate({left:'-100%'},500);
      pos = pos &gt;= numOfSlides-1 ? 0 : ++pos;
      slides.eq(pos).css({left:'100%'}).animate({left:0},500);
  }
  
  function previousSlide(){
      stopCurrentVideo();
      slides.eq(pos).animate({left:'100%'},500);
      pos = pos == 0 ? numOfSlides-1 : --pos;
      slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
  }
  
  function stopCurrentVideo(){
      $('.slider-video:eq('+pos+')').load().removeAttr('controls')
      .siblings('.overlay-content').show().find('.play-button').show();
  }
  
  $('.left').click(previousSlide);
  $('.right').click(nextSlide);
  </code></pre>