"Video Card"
Bootstrap 3.3.0 Snippet by john-Graham

<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"> <div class="row"> <div class="col-md-6 "> <div class="card"> <div class="card-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/SC1XE85BC9o" frameborder="0" allowfullscreen></iframe> </div> </div><!-- card image --> <div class="card-content"> <span class="card-title">Will my credits transfer?</span> </div><!-- card content --> </div> </div> <div class="col-md-6 "> <div class="card"> <div class="card-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/VNYwx5KBoYY" frameborder="0" allowfullscreen></iframe> </div> </div><!-- card image --> <div class="card-content"> <span class="card-title">Do I have to live on campus?</span> </div><!-- card content --> </div> </div> </div> <div class="row"> <div class="col-md-6 "> <div class="card"> <div class="card-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/23mXDU5bBhw" frameborder="0" allowfullscreen></iframe> </div> </div><!-- card image --> <div class="card-content"> <span class="card-title">How can I pay for college?</span> </div><!-- card content --> </div> </div> <div class="col-md-6 "> <div class="card"> <div class="card-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/oJhPYmw21fw" frameborder="0" allowfullscreen></iframe> </div> </div><!-- card image --> <div class="card-content"> <span class="card-title">Will I fit in?</span> </div><!-- card content --> </div> </div> </div> <div class="row"> <div class="col-md-6 "> <div class="card"> <div class="card-image"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/DUUR2KAP47A" frameborder="0" allowfullscreen></iframe> </div> </div><!-- card image --> <div class="card-content"> <span class="card-title">Transfer Price</span> <button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align"> <i class="fa fa-ellipsis-v"></i> </button> </div><!-- card content --> <div class="card-reveal"> <span class="card-title">Transfer Price</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div><!-- card reveal --> </div> </div> </div> </div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); .card .card-image{ overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card{ margin-top: 10px; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .card .card-content { padding: 10px; } .card .card-content .card-title, .card-reveal .card-title{ font-size: 24px; font-weight: 200; } .card .card-action{ padding: 20px; border-top: 1px solid rgba(160, 160, 160, 0.2); } .card .card-action a{ font-size: 15px; color: #ffab40; text-transform:uppercase; margin-right: 20px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; -ms-transition: color 0.3s ease; transition: color 0.3s ease; } .card .card-action a:hover{ color:#ffd8a6; text-decoration:none; } .card .card-reveal{ padding: 20px; position: absolute; background-color: #FFF; width: 100%; overflow-y: auto; /*top: 0;*/ left:0; bottom:0; height: 100%; z-index: 1; display: none; } .card .card-reveal p{ color: rgba(0, 0, 0, 0.71); margin:20px ; } .btn-custom{ background-color: transparent; font-size:18px; }
$(function(){ $('#show').on('click',function(){ $('.card-reveal').slideToggle('slow'); }); $('.card-reveal .close').on('click',function(){ $('.card-reveal').slideToggle('slow'); }); });

Related: See More


Questions / Comments:

How do you make it left right left right? My second video appears on the bottom of my first video

anotherids () - 5 years ago - Reply 0


Did you miss your column? url?

john-Graham () - 5 years ago - Reply 0