fixed vimeo API calls for thumbnails and embed url
This commit is contained in:
parent
63f647d99c
commit
79bff63820
2 changed files with 32 additions and 28 deletions
22
6_video.html
22
6_video.html
|
|
@ -35,27 +35,19 @@ permalink: /video/
|
|||
<div id="video-roster" class="content container-fluid">
|
||||
|
||||
{% 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 %}
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
<div id="videotext"></div>
|
||||
|
|
@ -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('<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.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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue