108 lines
3 KiB
HTML
108 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>
|