Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Using vimeo API in Wordpress
// vimeo helper function
// Curl helper function
// based on this example
// detailed explanations are in this post:
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);
return $return;
<div class="list-item list-item-video">
<a href="" 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="" />
<p class="list-item-title small-font">
<a href="" class="exhib-link">The Title</a>
// Turn off all error reporting
// for some webhosts ...
// 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("", "", $vimeo_key);
$vimeo_key = str_replace("", "", $vimeo_key);
$vimeo_key = rtrim($vimeo_key,"/");
$api_endpoint = '' . $vimeo_key .'.xml';
$videos = simplexml_load_string(curl_get($api_endpoint));
<div class="list-item list-item-video list-grid-system">
<a href="<?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 ?>
<p class="list-item-title small-font">
echo '(some method to get the title of this item)';
} // 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="' + 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.