first steps to implement video showcase

6_video.html

@@ -0,0 +1,107 @@
+---
+layout: page
+title: Video showcase
+icon: video
+visible: false
+permalink: /video/
+---
+
+{% assign post_number = site.posts | size %}
+
+<div id="video-roster" class="content container-fluid">
+
+ {% for post in site.posts %}
+   {% if post.layout != "event-spektrum" %}
+     {% continue %}
+   {% endif %}
+   
+   {% for talk in post.talks %}
+   
+   {% if talk.talk_video_url %}
+     
+     {% assign vimeo_id = 43849383 %}
+     
+     <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>