There are two available Video elements:
VideoBox
Video Box
HTML markup:
|
1 2 3 4 |
<div class="ct-videoBox"> <iframe src="//player.vimeo.com/video/9211288" width="100%" height="372" frameborder="0" allowfullscreen></iframe> <p class="ct-videoBox-description ct-u-paddingTop20">...</p> </div> |
Video Product
Video Product
HTML markup:
|
1 2 3 4 5 6 7 |
<div class="ct-videoProduct is-active"> <img src="assets/images/demo-content/video-image-1-small.jpg" alt="Video 1"> <div class="ct-videoProduct-description"> ... </div> <div class="clearfix"></div> </div> |
Javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ $('.ct-videoBox:first').css('display','block'); $('.ct-videoProduct').click(function(){ if($('.ct-videoProduct.is-active')){ $('.ct-videoProduct.is-active').each(function(){ $(this).removeClass('is-active'); }); } if(!($(this).hasClass('is-active'))) $(this).addClass('is-active'); var elnum = $(this).index(); $('.ct-videoBox').each(function(){ $(this).css("display", "none"); }); $('.ct-videoBox').eq(elnum).css("display", "block"); }); }); |