diff --git a/6_video.html b/6_video.html index 7eb74049..3da90667 100644 --- a/6_video.html +++ b/6_video.html @@ -35,27 +35,19 @@ permalink: /video/
{% 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 %} - + {% 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 %}
{{talk.title}}
-

{{talk.artist}} / {{talk.artist_website}} – #{{ post.number }}: {{talk.description}}

+

#{{ post.number }}: {{talk.artist}} / {{talk.artist_website}} – {{talk.description}}

- - {% endif %} - + {% endif %} {% endfor %} - {% endfor %}
@@ -72,8 +64,8 @@ permalink: /video/ 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 + '")'); + 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('height', (($this.width()/4)*3)); }); @@ -109,7 +101,13 @@ permalink: /video/ if (timer) { window.clearTimeout(timer); } - jQuery('#videoplayer #player').html(''); + 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&byline=0&portrait=0&autoplay=1"); + }); jQuery('#videoplayer').fadeIn(300); }); diff --git a/_site/css/video.css b/_site/css/video.css index eb362e83..06a6b78f 100644 --- a/_site/css/video.css +++ b/_site/css/video.css @@ -47,20 +47,20 @@ button #videotext { - width:40%; - background-color:#fff; + width:600px; + background-color:#000; opacity:.8; position:fixed; - z-index:100; - right:20px; - top:20px; + z-index:10000; + right:50px; + bottom:50px; display:none; padding:30px; } #videotext .video-title { - color:#000; + color:#fff; font-size: 1.7em; background-color:none; } @@ -78,8 +78,12 @@ button .playbutton { + display:block; + position:absolute; + top:70px; + left:90px; + z-index:1000000; width:60px; - margin-top:30px; display:none; pointer-events: none; } @@ -88,7 +92,9 @@ button { display:block; position:fixed; - z-index:1000; + top:100px; + left:40px; + z-index:1000000; width:100%; height:100%; display:none; @@ -111,8 +117,8 @@ button display:block; width:50px; height:50px; - top:0; - right:0; + top:130px; + right:30px; background-image:url("/images/close-button-large.png"); background-size:cover; }