I recently got a message from Robbie asking me for some help about the use of Vimeo’s api froogaloop with ajax and decided to make a post of the answer so that it could benefit others.

My first encounter with froogaloop goes back a few months ago when i developped Daniel Primo‘s site and i recently dove back in as i’m currently finishing a project that also involves videos and external controls with the extra feature of loading the videos via ajax. This new site is wordpress based and displays several videos as part of a portfolio. It’s based on the Garnish theme. Still with me? Good, let’s go.

First, the videos are saved via the WordPress admin within a post (from a custom post type) and the help of the Custom Field Template plugin:

video-admin

As you can see, i save parameters related to the videos, id, width and height. The only mandatory one is of course the id. There can be several videos as part of one project but that’s another story.

Then comes the call of the content with a classic

loop:

Some infos about this code:

I use the get_cft_repeating_data() function to get the video(s) infos located in the custom fields. This function is not from me but i can’t find it back on the web so here it is:

If anyone knows its origin, feel free to let a link in the comments. Note, this is a bit off topic but as long as i am sharing, let’s do it well.

If there are some results, i loop through them to display the videos within an iframe.
Those lines retrieve the infos of the current video being processed:

Then comes the construction of the iframe:

As you can see i have a counter $i and this is very important. Each video being displayed has to get a unique iframe id that will also be used as one of the parameters of the url, in this case

and

Don’t miss it or it just won’t do. The second important point here is also a url parameter to activate Vimeo’s api:

And the third point is the class given to the iframe, ifr in this case. You’ll see why pretty soon.

I won’t enter the details as how the content is being loaded via ajax as it’s being handled by the Garnish theme (great code by the way). Anyway, when an item is being clicked in the site, it loads the content related to this post and the video(s). Now the trick is to stop those videos when closing the container that holds the post’s content.

First, you have to make sure that you load the froogaloop api. Then we basically have to watch for a button being clicked, a simple

in my case, to stop the video. This could be called on (document).ready but in this case with the content being loaded via ajax, it won’t do. So it has to be called on ajaxcomplete:

As you can see, i here query the iframes with the specific class .ifr only, otherwise it would lead to javascript bugs (big thanks to Cédric for the help on that). I then used the (sligthly updated) code on the Vimeo’s example to interact with the video:

I here unload completely unload the video, but you could also pause or even play it with this kind of control.

And there it goes. The live demo should come by the end of the week as the site goes live. I’ll then update the post with the link.

Cheers.

Past Work

Soloteste

Design & development
Visit live site

Pousada Corsário

Design & development
Details Visit live site

Sydney Colombani

Design & development
Visit live site

Brecha

Development
Visit live site

Julia Queima

Design & development
Visit live site

Costa Brasilis

Design & Developement
Details

A3Interiores

Wp Development
Visit live site

ValorCafé e-commerce

Design
Details Visit live site

Oficina de Arquitetos

Development
Visit live site

Cani.tv

Development
Visit live site

Zee Champanheria

App design
Details

Rioow

Design & development
Details

ASBEA/RJ

Design & development
Details Visit live site

ValorCafé

Design & development
Details Visit live site

Livraria da Travessa

Design & development
Details Visit live site

Furafila

App design
Details

NETbureau

Design & development
Details Visit live site

About

So, i'm a developer from France currently living in Rio de Janeiro. I do code for the front-end side of the web with things like javascript, html, css, preprocessors, tasks runners, version control, frameworks, tdd, CI, Wordpress and others.

I do speak english, portuguese and french, read tons of books, love to play on a wake, bmx and snowboard and would like to travel to the Karakoram range, Tierra del Fuego and Mongolia.

I do appreciate you stopping by and admit i did abuse of the auxiliary verb do in this about.