Using vimeo API in Wordpress

010-functions.php

// 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;
}

020-sample-markup.html

<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>

030-wordpress-loop.php

// 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

 } 

040-play-vimeo.js

/* 
 * 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;
 });

050-vimeo-styling.css

/* @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 */