<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");
});
});
});