filmstrip demo

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div id="wrapper">
     <h1>Filmstrip Demo</h1>

    <div class="container">
        <div class="slider">
            
            <div>
                <div class="slide-content">
                    <video preload="none" poster="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-012.jpg">
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-012.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-012.ogv" type="video/ogg" />
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-012.webm" type='video/webm;codecs="vp8, vorbis"' />
                    </video>
                    <p>slide-012</p>
                </div>
            </div>
            
            <div>
                <div class="slide-content">
                    <video preload="none" poster="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-014.jpg">
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-014.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-014.ogv" type="video/ogg" />
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-014.webm" type='video/webm;codecs="vp8, vorbis"' />
                    </video>
                    <p>slide-014</p>
                </div>
            </div>
            
            <div>
                <div class="slide-content">
                    <video preload="none" poster="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-015.jpg">
                        <source src="http://www.nickpish.com/_dev/filmstrip-demo/vid/slide-015.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
                        <source...

CSS

/*-------------------- reset stylesheet --------------------- */
 html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
    display: block;
}
a {
    outline: none;
}
/*-------------------- clearfix --------------------- */
 .cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
/*-------------------- global styles & structure --------------------- */
 body {
    font-family: sans-serif;
}
#wrapper {
    max-width: 960px;
    margin: 0 auto;
}
h1 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding-top: 15px;
}
.container {
    padding: 15px 30px;
}
/* fade in slider when loaded; class added via jQuery */
 .slider {
    display: block;
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.slider.loaded {
    display: block;
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.slider div.slide-content {
    position: relative;
    margin-right: 5px;
}
.slider div p {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    /* background-color: rgba(255, 255, 255, 0.7); */
    z-index: 5;
    padding: 5px;
    color: white;
}
.slider div img {
    max-height: 160px;
    width: auto;
    border: 1px solid #666;
}
.slider div video...

JavaScript

$(document).ready(function () {
    $('.slider').addClass("loaded");
    $('.slider').slick({
        dots: true,
        infinite: true,
        speed: 200,
        slidesToShow: 7,
        dots: true,
        lazyLoad: 'ondemand',
        variableWidth: true
    });
    $("video").click(function(e) {
    // get click position 
    var clickY = (e.pageY - $(this).offset().top);
    var height = parseFloat($(this).height());
    var self = this;

    // avoids interference with controls
    if (clickY > 0.82 * height) return;

    // toggles play / pause
    self.paused ? self.play() : self.pause();
    $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      if (!self.paused) {
        self.pause();
      }
    });
  });
});