"Video list thumbnails"
Bootstrap 3.3.0 Snippet by abudayah

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <p> <h5>Features:</h5> <ul> <li>Responsive design with hover effect</li> <li>Compatible with bootstrap 3.0.0 and Up</li> <li>No Javascript</li> </ul> <hr> </p> <ul class="list-unstyled video-list-thumbs row"> <li class="col-lg-3 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</span> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</span> </a> </li> <li class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</span> </a> </li> </ul> </div>
.video-list-thumbs{} .video-list-thumbs > li{ margin-bottom:12px; } .video-list-thumbs > li:last-child{} .video-list-thumbs > li > a{ display:block; position:relative; background-color: #111; color: #fff; padding: 8px; border-radius:3px transition:all 500ms ease-in-out; border-radius:4px } .video-list-thumbs > li > a:hover{ box-shadow:0 2px 5px rgba(0,0,0,.3); text-decoration:none } .video-list-thumbs h2{ bottom: 0; font-size: 14px; height: 33px; margin: 8px 0 0; } .video-list-thumbs .glyphicon-play-circle{ font-size: 60px; opacity: 0.6; position: absolute; right: 39%; top: 31%; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition:all 500ms ease-in-out; } .video-list-thumbs > li > a:hover .glyphicon-play-circle{ color:#fff; opacity:1; text-shadow:0 1px 3px rgba(0,0,0,.8); } .video-list-thumbs .duration{ background-color: rgba(0, 0, 0, 0.4); border-radius: 2px; color: #fff; font-size: 11px; font-weight: bold; left: 12px; line-height: 13px; padding: 2px 3px 1px; position: absolute; top: 12px; transition:all 500ms ease; } .video-list-thumbs > li > a:hover .duration{ background-color:#000; } @media (min-width:320px) and (max-width: 480px) { .video-list-thumbs .glyphicon-play-circle{ font-size: 35px; right: 36%; top: 27%; } .video-list-thumbs h2{ bottom: 0; font-size: 12px; height: 22px; margin: 8px 0 0; } }

Related: See More


Questions / Comments:

it isnt playing

Wasim Ahmed () - 7 years ago - Reply -1


Doesn't work with big images (doesn't scale)
also can't place it inside of a div :/

Wouter () - 7 years ago - Reply 0


Line 12 in the CSS is missing a semicolon on the end. Actually the whole line is pointless as the border-radius is set to 4px two lines later.

rtpHarry () - 8 years ago - Reply 0


Hello. How can I add the video?

George () - 9 years ago - Reply 0


go to youtube, click on 'share' under the video and look for the word 'embed' under the dropdown. Copy the link. It should look like <iframe>some text</iframe>

Jim () - 8 years ago - Reply 0