<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">
<br><br>
<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" data-toggle="modal" data-target="#myModal1">
<img src="https://img.youtube.com/vi/aCD3JW6Eibw/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>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/aCD3JW6Eibw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal2">
<img src="https://img.youtube.com/vi/uBWnnGM5v-w/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>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/uBWnnGM5v-w" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal3">
<img src="https://img.youtube.com/vi/Ul448pcAA7k/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>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/Ul448pcAA7k" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal4">
<img src="https://img.youtube.com/vi/7pnAbg7IZ6Q/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>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/7pnAbg7IZ6Q" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal5">
<img src="https://img.youtube.com/vi/D_woGz44IL8/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>
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/D_woGz44IL8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal6">
<img src="https://img.youtube.com/vi/VVI8pFPrcsE/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>
<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/VVI8pFPrcsE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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" data-toggle="modal" data-target="#myModal7">
<img src="https://img.youtube.com/vi/Q-Bsqkq6nzU/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>
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/Q-Bsqkq6nzU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</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;
}
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
@media (min-width: 768px) {
.modal-dialog {
width: 745px;
margin: 10px auto;
}
}
