scopesessions.org/6_video.html

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

{% assign allTopics = "" | split:"|"  %}
{% for post in site.posts %}
  {% for talk in post.talks %}
    {% if talk.talk_video_url %}
      {% for topic in talk.topics %}
        {% assign talkTopics = topic | split:","  %}
        {% for talkTopic in talkTopics %}
        {% assign tt = talkTopic | strip | downcase %}
          {% unless allTopics contains tt %}
            {% assign allTopics = allTopics | push: tt %}
          {% endunless %}
        {% endfor %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% assign allTopicsABC = allTopics | sort %}

<div class="button-group filter-button-group">
  <button data-filter="*">show all</button>
  {% for thisTopic in allTopicsABC %}
    <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
  {% endfor %}
</div>

<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/' %}

     {% if talk.topics %}
       {% assign tags = (talk.topics | split:",") %}
     {% endif %}

     <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}}" vimeo="{{vimeo_id}}">
       <div class="video-title">{{talk.title}}</div>
       <img class="playbutton" src="/images/play-button.png" />
       <div class="video-description"><p><span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – <span class="video-session">#{{ post.number }}</span>: {{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('');
         });
       });

     });
     $('#video-roster').isotope({
       // options
       itemSelector: '.videobox'
     });
     // init Isotope
      var $grid = $('#video-roster').isotope({
      });
      // filter items on button click
      $('.filter-button-group').on( 'click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
      });
   });
 </script>