<div style="max-width: 730px; margin:0px auto">
<h1>Youtube videos gallery with swiper (slider) Thumbnails</h1>
  <h4>requires - jquery / swiper v6 (slider )/ FitVids (responsive youtube) / little js code (under JS tab). Enjoy</h4>
  <container class="vid-main-wrapper clearfix">
    <!-- THE YOUTUBE PLAYER -->
    <div class="vid-container">
      <iframe id="vid_frame" src="https://www.youtube.com/embed/WAcnWtZjDWE?rel=0&showinfo=0&autohide=1&autoplay=1" frameborder="0" width="560" height="315" allow="autoplay" allowfullscreen></iframe>
    </div>
  </container>

  <section id="extra wrapper" style="position: relative; padding-right: 32px; padding-left: 32px; background: #f6f6f6;">

    <!-- CUSTOM ARROWS -->
    <button title="Next" class="swiper-custom-next" style="position: absolute; padding: 10px 2px; right: 1px;top: 32%; z-index: 100;
    display: inline-block;cursor: pointer;">     
<svg style="position: relative; top: 1px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g class="nc-icon-wrapper" fill="#111111"><polygon fill="#111111" points="4.9,15.7 3.4,14.3 9.7,8 3.4,1.7 4.9,0.3 12.6,8 "></polygon></g></svg>
      </button>
    <button title="Prev" class="swiper-custom-prev" style="position: absolute; padding: 10px 2px; left: 2px; top: 35%; z-index: 100;
    display: inline-block;cursor: pointer;font-size: 15px;">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g class="nc-icon-wrapper" fill="#111111"><polygon fill="#111111" points="11.1,15.7 3.4,8 11.1,0.3 12.6,1.7 6.3,8 12.6,14.3 "></polygon></g></svg>
    </button>

    <!-- Swiper -->
    <nav class="swiper swiper-container-videos slider-produtos-destaque">
      <ol class="swiper-wrapper" style="list-style-type: none; padding: 0px;">
        <li class="swiper-slide">
          <a class="" href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/WAcnWtZjDWE?autoplay=1&rel=0&showinfo=0&autohide=1'">
          <span class="vid-thumb">
     <img src="https://img.youtube.com/vi/WAcnWtZjDWE/mqdefault.jpg" />
        </span>
                  <p class="desc">Video 1</p>
                </a>
        </li>

        <li class="swiper-slide">
          <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/h8r5rbUmBzs?autoplay=1&rel=0&showinfo=0&autohide=1'">
                  <span class="vid-thumb"><img  src="https://img.youtube.com/vi/h8r5rbUmBzs/mqdefault.jpg" /></span>
                  <p class="desc">Video 2</p>
                </a>
        </li>

        <li class="swiper-slide">
          <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/togt3pGntVc?autoplay=1&rel=0&showinfo=0&autohide=1'">
                  <span class="vid-thumb"><img  src="https://img.youtube.com/vi/togt3pGntVc/mqdefault.jpg" /></span>
                  <div class="desc">Video 3</div>
                </a>
        </li>

        <li class="swiper-slide">
          <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/JyqD_zfXfi8?autoplay=1&rel=0&showinfo=0&autohide=1'">
                  <span class="vid-thumb"><img  src="https://img.youtube.com/vi/JyqD_zfXfi8/mqdefault.jpg" /></span>
                  <div class="desc">Video 4</div>
                </a>
        </li>

        <li class="swiper-slide">
          <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/X8sSXU-J8fI?autoplay=1&rel=0&showinfo=0&autohide=1'">
                  <span class="vid-thumb"><img  src="https://img.youtube.com/vi/X8sSXU-J8fI/mqdefault.jpg" /></span>
                  <div class="desc">Video 5</div>
                </a>
        </li>

      </ol>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- If we need navigation buttons -->

    </nav>

  </section>
  <h2>Notes</h2>
  <ul>
    <li>
      slidesPerView: "auto",
      how much slides per view? by CSS (36% in this case)
    </li>
    <li>
      jquery requires
    </li>
    <li>

      <a href="https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api"><b>Get Thumbnails: </b>How do I get a YouTube video thumbnail from the YouTube API?
</a>
    </li>
    <li><a href="http://idangero.us/swiper/" target="_blank">Swiper (slider) docs</a></li>
    <li>In this example i use swiper.js custom arrows</li>
    <li><a href="http://fitvidsjs.com/" target="_blank">FitVids (responsive youtube) docs</a></li>
    <li><a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" target="_blank">Chrome autoplay not working (with sound) - first click on thumbnail X will not play the video (chrome 2018 new policy)</a></li>
    <li><a href="https://developers.google.com/youtube/player_parameters#showinfo" target="_blank">rel:0 - also not working (August 23, 2018
 - youtube new policy)</a></li>
  </ul>
</div>

/* ####################################
           SITON STYLES 
####################################### */

.swiper-custom-next.swiper-button-disabled,
.swiper-custom-prev.swiper-button-disabled
{
  opacity: 0.2;
  
}

/* Zoom In on hover */
.vid-thumb {
	overflow: hidden;
  display: block;
  width: auto;
}

.vid-thumb img{
   display: block;
}

.swiper-slide:hover .desc{
  margin: 0px;
  padding: 0px;
  text-decoration: underline;
}

.vid-thumb img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.vid-thumb:hover img {
	-webkit-transform: scale(1.08);
	transform: scale(1.08);
}

/* #####################
      SWIPER STYLES
#######################*/
.swiper-container-videos .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  position: relative;
  top: 0px;
}

.swiper-container-videos .swiper-slide a {
  text-decoration: none;
  font-size: 14px;
  color: #1f2f3c;
}
@media only screen and (max-width: 800px) {
  .swiper-container-videos .swiper-slide a {
    font-size: 11px;
    line-height: 14px;
  }
}
.swiper-container-videos  .selected.swiper-slide a .desc {
  color: #721e2e;
  font-weight: bold;
}
.swiper-container-videos  .selected {
  border-bottom: 1px solid #c4c4c4;
}
/*  
slidesPerView: "auto" so the width of each slide set by CSS */
.swiper-container-videos .swiper-slide {
  max-width: auto;
  width: 36%;
  text-align: center;
  font-size: 18px;
  background: #fff;
}

.swiper-container-videos .swiper-slide a .desc {
  margin-top: 3px;
  margin-bottom: 3px;
}

.swiper-container-videos .swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-pagination-bullet-active {
    background: #b4234c;
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}
/* webflow only this section swiper pagination */
$(document).ready(function() {
  /* add html by js (no way to add this HTML by webflow UI beacuse this is CMS list*/
  var part1 = "<div class=swiper-pagination></div>";
  //  var part2 = '<div class="swiper-button-prev"></div>';
  //var part3 = '<div class="swiper-button-next"></div>';
  // var swiperString = part1.concat(part2, part3);
  $("#swiper-press").append(part1);
});

/* change active class when click */
$(".swiper-container-videos .swiper-wrapper .swiper-slide a").click(function() {
  $(this)
    .closest(".swiper-slide")
    .addClass("selected")
    .siblings()
    .removeClass("selected");
  mySwiper1.slideTo(mySwiper1.clickedIndex);
});

$(".swiper-container-videos .swiper-slide")
  .first()
  .addClass("selected");

/* 1 of 2 : SWIPER */
var mySwiper1 = new Swiper(".swiper-container-videos", {
  // If loop true set photoswipe - counterEl: false
  loop: false,
  /* slidesPerView || auto - if you want to set width by css like flickity.js layout - in this case width:80% by CSS */
  slidesPerView: "auto",
  spaceBetween: 15,
  centeredSlides: false,

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  navigation: {
    nextEl: ".swiper-custom-next",
    prevEl: ".swiper-custom-prev"
  },

  keyboard: {
    enabled: true,
    onlyInViewport: true
  }
});

/* This is what makes the videos responsive. You can either include this in a <script> tag in the markup, or better yet, include it in a separata JavaScript file.*/
$(function() {
  //Look for all the videos inside this element and make them responsive
  $(".vid-container").fitVids();
});

/*JS FOR SCROLLING THE ROW OF THUMBNAILS*/

$(document).ready(function() {
  $(".vid-item").each(function(index) {
    $(this).on("click", function() {
      var current_index = index + 1;
      $(".vid-item .thumb").removeClass("active");
      $(".vid-item:nth-child(" + current_index + ") .thumb").addClass("active");
    });
  });
});
Run Pen

External CSS

  1. https://unpkg.com/swiper@7.0.1/swiper-bundle.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://unpkg.com/swiper@7.0.1/swiper-bundle.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/fitvids/1.0.1/jquery.fitvids.js