If you have a video site, or want to some videos in your site, it is essential to put their thumbnail for the users to select them. To save space, usually videos are uploaded to YouTube and a player located in the web pages to play them. The following code is an example of such video players which gets links and related image thumbnail from YouTube. It also contains a popup video player which plays videos by click. The thumbnails are responsive and their dimensions changed by either increasing their number in a row or changing the screen size.


HTML
<!-- This script got from www.devanswer.com -->
<main role="main">
<section class="videos" id="featured-videos">
<div class="video-grid front-page" id="front-page-videos">
<ul class="video-list featured">

<li class="video featured">
<a data-fancybox href="https://www.youtube.com/embed/pOhl6oVpEes?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video">
<figure style="background-image: url(https://img.youtube.com/vi/pOhl6oVpEes/hqdefault.jpg);">
<img src="http://devanswer.com/codes/files/video-thumb-placeholder-16-9.png" />
<figcaption>Junkyard 1956 Buick Hack</figcaption>
</figure>
</a>
</li>
<li class="video featured">
<a data-fancybox href="https://www.youtube.com/embed/PVs_xZ46Cxw?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video">
<figure style="background-image: url(https://img.youtube.com/vi/PVs_xZ46Cxw/hqdefault.jpg);">
<img src="http://devanswer.com/codes/files/video-thumb-placeholder-16-9.png" />
<figcaption>Wheelstanding Dump Truck! Stubby Bob’s Comeback</figcaption>
</figure>
</a>
</li>
</ul>
</div
  </section>
</main>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<link rel='stylesheet' href='http://devanswer.com/codes/files/jquery.fancybox-three.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://devanswer.com/codes/files/jquery.fancybox-three.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.video-grid.front-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1em 2em;
}

ul.video-list {
  display: flexbox;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

li.video {
  flex-grow: 1;
  position: relative;
  ooverflow: hidden;
  width: 33.333333333%;
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  border: solid 0.2em transparent;
}
li.video a {
  outline: none;
}
li.video:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color .15s;
}
li.video figure {
  display: block;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
li.video figure img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.5);
  transition: all .20s;
}
li.video figure figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 1rem;
  transform: translateY(0);
  opacity: 1;
  transition: all .20s;
}
li.video:hover figure img {
  opacity: 1;
  transform: scale(1);
}
li.video:hover figure figcaption {
  opacity: 0;
  transform: translateY(50%);
}
li.video:hover:before {
  background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 800px) {
  li.video {
    width: 50%;
    width: -webkit-calc(100% / 2);
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 640px) {
  li.video {
    width: 100%;
  }
}
/**
 * Pen styles
 */
html {
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
  font-size: 62.5%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: #fff;
  color: #444;
  font-family: 'Open Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-size: 1.8rem;
  line-height: 1.2;
}

header {
  width: 100%;
  padding: 2em;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}
header h1 {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.03em;
  color: #666;
}

main {
  padding: 2rem 0;
}

article {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1em 2em;
}