Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using vimeo API in Wordpress
// vimeo helper function
// Curl helper function
// based on this example
// https://github.com/vimeo/vimeo-api-examples/blob/master/simple-api/simple/simple.php
// detailed explanations are in this post:
// http://ms-studio.net/2012/notes/using-the-vimeo-api-in-wordpress/
function curl_get($url) {
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
$return = curl_exec($curl);
curl_close($curl);
return $return;
}
<div class="list-item list-item-video">
<a href="https://vimeo.com/couchmode/40485391" data-vimeo="40485391" target="_blank" id="post-1187" class="list-item-inside dblock jstrigger-vimeo unstyled">
<div class="vimeo-play-icon"></div>
<img class="vimeo-thumbnail" src="http://b.vimeocdn.com/ts/279/754/279754569_200.jpg" />
</a>
<p class="list-item-title small-font">
<a href="http://www.kunstraum-kreuzlingen.ch/costa-vece/" class="exhib-link">The Title</a>
</p>
</div>
// Turn off all error reporting
error_reporting(0);
// for some webhosts ...
// http://php.net/manual/en/function.error-reporting.php
// test for meta field
$vimeo_key = get_post_meta($post->ID, 'Vimeo-clip', true);
if ($vimeo_key) {
// YES, we have something...
// lets build the vimeo query
// fix the URLs for every case
// we want ONLY the NUMBER...
$vimeo_key = str_replace("http://vimeo.com/", "", $vimeo_key);
$vimeo_key = str_replace("https://vimeo.com/", "", $vimeo_key);
$vimeo_key = rtrim($vimeo_key,"/");
$api_endpoint = 'http://vimeo.com/api/v2/video/' . $vimeo_key .'.xml';
$videos = simplexml_load_string(curl_get($api_endpoint));
?>
<div class="list-item list-item-video list-grid-system">
<a href="https://vimeo.com/couchmode/<?php echo $vimeo_key; ?>" data-vimeo="<?php echo $vimeo_key; ?>" target="_blank" title="<?php the_title(); ?>" id="post-<?php the_ID(); ?>" class="list-item-inside dblock jstrigger-vimeo unstyled">
<div class="vimeo-play-icon"></div>
<?php foreach ($videos->video as $video): ?>
<img class="vimeo-thumbnail" src="<?php echo $video->thumbnail_medium ?>" />
<?php endforeach ?>
</a>
<p class="list-item-title small-font">
<?php
echo '(some method to get the title of this item)';
?>
</p>
</div>
<?php
} // if there is no meta field...
else {
// nothing happens
}
/*
* 2: AJAX - play vimeo
****************************************************
This script does the following:
When the user clicks the thumbnail, it gets replaced by an iframe where the video starts playing.
*/
$('.jstrigger-vimeo').click(function(){ // the trigger action
var vimeokey = $(this).data('vimeo');
// 240 x 180px
$(this).replaceWith('<iframe src="http://player.vimeo.com/video/' + vimeokey + '?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="240" height="180" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen class="list-item-inside dblock"></iframe>');
return false;
});
/* @group Page-Listing-Videos */
.list-item-video .list-item-inside {
overflow: hidden;
width: 240px;
height: 180px;
position: relative;
}
.vimeo-play-icon {
background-image: url(../images/arrow-vimeo.png);
width: 41px;
height: 39px;
position: absolute;
top: 65px;
left: 100px;
}
.vimeo-thumbnail {
width: 100%;
height: auto;
display: block;
margin: 0;
}
/* @end */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.