107 lines
3 KiB
HTML
107 lines
3 KiB
HTML
---
|
||
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&byline=0&portrait=0&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>
|