randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed vimeo API calls for thumbnails and embed url

Browse source
This commit is contained in:
Kiritan Flux 2017-01-21 20:21:49 +01:00
parent 63f647d99c
commit 79bff63820
2 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

34
6_video.html
View file

@ -35,27 +35,19 @@ permalink: /video/
<div id="video-roster" class="content container-fluid"> <div id="video-roster" class="content container-fluid">
{% for post in site.posts %} {% for post in site.posts %}
{% for talk in post.talks %} {% for talk in post.talks %}
{% if talk.talk_video_url %}
{% if talk.talk_video_url %} {% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %}
{% if talk.topics %}
{% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %} {% assign tags = (talk.topics | split:",") %}
{% endif %}
{% 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}}" vimeo="{{vimeo_id}}"> <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}}" vimeo="{{vimeo_id}}">
<div class="video-title">{{talk.title}}</div> <div class="video-title">{{talk.title}}</div>
<img class="playbutton" src="/images/play-button.png" /> <img class="playbutton" src="/images/play-button.png" />
<div class="video-description"><p><span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – <span class="video-session">#{{ post.number }}</span>: {{talk.description}}</p></div> <div class="video-description"><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
</div> </div>
{% endif %}
{% endif %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
<div id="videotext"></div> <div id="videotext"></div>
@ -72,8 +64,8 @@ permalink: /video/
jQuery( document ).ready(function() { jQuery( document ).ready(function() {
jQuery('.videobox').each(function() { jQuery('.videobox').each(function() {
var $this = jQuery(this); var $this = jQuery(this);
jQuery.getJSON('http://www.vimeo.com/api/v2/video/' + jQuery(this).attr('vimeo') + '.json?callback=?', {format: "json"}, function(data) { jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
$this.css('background', 'url("' + data[0].thumbnail_large + '")'); $this.css('background', 'url("' + data.thumbnail_url + '")');
$this.css('background-size', 'cover'); $this.css('background-size', 'cover');
//$this.css('height', (($this.width()/4)*3)); //$this.css('height', (($this.width()/4)*3));
}); });
@ -109,7 +101,13 @@ permalink: /video/
if (timer) { if (timer) {
window.clearTimeout(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.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').fadeIn(300);
}); });

26
_site/css/video.css
View file

@ -47,20 +47,20 @@ button
#videotext #videotext
{ {
width:40%; width:600px;
background-color:#fff; background-color:#000;
opacity:.8; opacity:.8;
position:fixed; position:fixed;
z-index:100; z-index:10000;
right:20px; right:50px;
top:20px; bottom:50px;
display:none; display:none;
padding:30px; padding:30px;
} }
#videotext .video-title #videotext .video-title
{ {
color:#000; color:#fff;
font-size: 1.7em; font-size: 1.7em;
background-color:none; background-color:none;
} }
@ -78,8 +78,12 @@ button
.playbutton .playbutton
{ {
display:block;
position:absolute;
top:70px;
left:90px;
z-index:1000000;
width:60px; width:60px;
margin-top:30px;
display:none; display:none;
pointer-events: none; pointer-events: none;
} }
@ -88,7 +92,9 @@ button
{ {
display:block; display:block;
position:fixed; position:fixed;
z-index:1000; top:100px;
left:40px;
z-index:1000000;
width:100%; width:100%;
height:100%; height:100%;
display:none; display:none;
@ -111,8 +117,8 @@ button
display:block; display:block;
width:50px; width:50px;
height:50px; height:50px;
top:0; top:130px;
right:0; right:30px;
background-image:url("/images/close-button-large.png"); background-image:url("/images/close-button-large.png");
background-size:cover; background-size:cover;
} }