StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Edit (Aug 2014)</strong>: I recently wrote a <a href="https://github.com/jrue/Vimeo-jQuery-API">jQuery Vimeo plugin</a>, which basically solves this problem much more elegantly. But the solution, if you're hard coding, this is below:</p> <p>When loading Vimeo videos, you have to include the query string <code>&api=1</code> to the URL. This allows you to make API event calls. Vimeo also requires a <code>&player_id=SOME_ID</code> if you're going to have multiple videos loading, which needs to match the id on the iframe it's loaded (or in my case, use jQuery to add it to the iframe after JSON is loaded, since I'm creating it dynamically.)</p> <p>I lost half a day on this. Here is what my final code came out to if it's helpful to anyone else trying to load Vimeo videos dyanmically.</p> <p>Using Vimeo's Froogaloop framework</p> <pre><code><script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> </code></pre> <p>my js</p> <pre><code>var videoData = [ { 'title':'The Farm', 'id':'farmvideo', 'videoURL':'http://vimeo.com/27027307' }]; $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){ $('#video-container').html(data.html); //puts an iframe embed from vimeo's json $('#video-container iframe').load(function(){ player = document.querySelectorAll('iframe')[0]; $('#video-container iframe').attr('id', videoData[0]['id']); $f(player).addEvent('ready', function(id){ var vimeoVideo = $f(id); console.log('success'); }); }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload