---
layout: page
title: Video showcase
icon: video
visible: false
permalink: /video/
---

<div id="video-roster" class="content container-fluid">

 {% for post in site.posts %}
   
   {% for talk in post.talks %}
   
   {% if talk.talk_video_url %}
     
     {% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %}     
     
     <div class="videobox" vimeo="{{vimeo_id}}">
       <div class="video-title">{{talk.title}}</div>
       {% if talk.topics %}
        <ul class="tags">
         {% assign tags = (talk.topics | split:",") %}
          {% for tag in tags | uniq %}
           <li>{{tag}}</li>
          {% endfor %}
        </ul>
       {% endif %}     
       <img class="playbutton" src="/images/play-button.png" />
       <div class="video-description"><p>{{talk.artist}} / {{talk.artist_website}} – {{talk.description}}</p></div>
     </div> 
     
   {% endif %} 
   
   {% endfor %}

 {% endfor %}
 
  <div id="videotext"></div>

  <div id="videoplayer">
    <div id="player"></div>
    <div id="close-button"></div>
  </div>
  
</div> <!-- container -->

<script>

   jQuery( document ).ready(function() {
     jQuery('.videobox').each(function() {
       var $this = jQuery(this);
       jQuery.getJSON('http://www.vimeo.com/api/v2/video/' + jQuery(this).attr('vimeo') + '.json?callback=?', {format: "json"}, function(data) {
         $this.css('background', 'url("' + data[0].thumbnail_large + '")');
         $this.css('background-size', 'cover');
         //$this.css('height', (($this.width()/4)*3));
       });
       
       $this.on('mouseover', function() {
         var offset = $this.offset();
         var center = jQuery(window).width()/2;
         if( offset.left > center) {
           jQuery('#videotext').css('right', '');
           jQuery('#videotext').css('left', '20px');
         } else {
           jQuery('#videotext').css('left', '');
           jQuery('#videotext').css('right', '20px');
         }
         jQuery('#videotext').html($this.html());
         $this.find("img").show();
         timer = window.setTimeout(function() {
           jQuery('#videotext').show(300);
         }, 500);
       });

       $this.on('mouseout', function() {
         jQuery('#videotext').hide();
         $this.find("img").hide();
         if (timer) {
           window.clearTimeout(timer);
         }
       });

       $this.on('click', function() {
         jQuery('#videotext').hide();
         $this.find("img").hide();
         if (timer) {
           window.clearTimeout(timer);
         }
         jQuery('#videoplayer #player').html('<iframe src="http://player.vimeo.com/video/'+$this.attr('vimeo')+'?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="100%" height="100%" frameborder="0"></iframe>');
         jQuery('#videoplayer').fadeIn(300);
       });

       jQuery('#videoplayer').on('click', function() {
         jQuery(this).fadeOut(500, function() {
           jQuery('#videoplayer #player').html('');
         });
       });

     });
   });
 </script>