froogaloop: $ is not defined

Question

I'm using the froogaloop library for embedding Vimeo videos and I came across this error. I took all the code right from Vimeo's site (https://developer.vimeo.com/player/js-api).

I have linked the Javascript library earlier in the code then when the code below is executed.

Any ideas?

Web Console Error: "ReferenceError: $ is not defined"

Javascript code:

$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

Answer 1

You are either loading jQuery after this code or not at. You need to include jQuery before this script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>