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="content">

  <div class="row">

    <div class="dark_bg col-md-10 col-md-offset-1">

      <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>
  </div>

  <div class="spacer"></div>

  <div class="row">
    <div class="dark_bg col-md-10 col-md-offset-1">

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

       {% for post in site.posts %}
         {% for talk in post.talks %}
           {% if talk.talk_video_url %}
             {% assign vimeo_id = talk.talk_video_url %}
             {% 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}} col-sm-3 embed-responsive embed-responsive-16by9" vimeo="{{vimeo_id}}">
             <div class="video-title">{{talk.artist}}</div>
             <div class="playbutton"></div>
             <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{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>

  </div>

</div> <!-- container -->

<script>

   jQuery( document ).ready(function() {

     jQuery('.videobox').each(function() {

       var $this = jQuery(this);
       jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
         $this.css('background', 'url("' + data.thumbnail_url + '")');
         $this.css('background-size', 'cover');
         $this.css('background-position', 'center center');
       });

       $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');
           jQuery('#videotext').css('top', '80px');
         } else {
           jQuery('#videotext').css('left', '');
           jQuery('#videotext').css('right', '20px');
           jQuery('#videotext').css('top', '80px');
         }

         jQuery('#videotext').html($this.html());
         $this.find(".playbutton").show();
         timer = window.setTimeout(function() {
           jQuery('#videotext').show(300);
         }, 500);
       });

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

       $this.on('click', function() {
         jQuery('#videotext').hide();
         $this.find("img").hide();
         if (timer) {
           window.clearTimeout(timer);
         }
         jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
           var player = jQuery('#videoplayer #player');
           player.html(data.html)
           player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
           var src = player.find( "iframe" ).attr('src');
           player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
         });
         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 });
        $('.filter-button-group').find('button').css('background-color', 'black');
        $(this).css('background-color', '#5a4b68');
      });
   });
 </script>