Latest Vimeo Video Javascript

The instructions and code here are for displaying your latest Vimeo video on your web page. This Javascript does most of the work on the browser side, so it should be compatible with most platforms. You will upload the vimeo_latest_json.js file to your website's storage area, then call it from your web pages. Upload the file to the server once and then you can use just two lines of code on any number of web pages to use it.

Before uploading the file you need to make a few tweaks to customize the program for your website.

  1. Download the vimeo_latest_json.js file at the bottom of this Wiki page.
  2. Edit the file in your favorite text editor to change the default values. (such as Notepad++ editor)
  3. There are three values you should verify or edit, notes are in the file on what to change and options. Only make changes to the variables in the first section. You will need to adjust the size of the preview image to match your site. If you use the channel option, make sure you enter in the channel URL name and not the user name.
  4. Save the file to your local computer and note the location for uploading in the next section.

The instructions below are tweaked for FinalWeb websites. Adjust for your site hosting platform as needed. You need to have the vimeo_latest_json.js file on your website for the user's browser to download in the background.

Uploading the .js file to FinalWeb:

  1. Click on Site Manager.
  2. Click on Tools.
  3. Click on File Manager.
  4. Click on Upload Files (about mid way down the page.)
  5. Find the vimeo_latest_json.js file that you downloaded to your computer.
  6. You will see a message about a successful upload. Click on File Manager again to reload the page so you can see the file listed.
  7. Scroll down to the find the .js file and click on the preview button for the file.
  8. A new tab should open. Take note of the URL in the address bar of your browser, you will need this path in the next section.

Calling the object from your website:

  1. In the web page or web part that you want to add the video into begin editing that page like you would normally edit it.
  2. Then click Source in the upper left hand corner of the editing window to go into raw HTML editing mode.
  3. Paste the green code below to your editor and change the URL behind the src= to match the one noted in the upload section. This is how your web page will call the code that will talk with Vimeo. The script will run and it will replace the DIV tag with the name vimeoEmbed. This DIV tag must be on the page, this is where the Javacript will insert your latest video.
  4. Click source again to hide the code, you will see "Loading latest video..." in the place where the video will appear. The video will not load in the editor.
  5. Click save to save the page back to the server.
  6. You should now see the loading text then the video will appear. Some times the video will not appear while you are in editing mode, open in another browsing window if that happens.
<script type="text/javascript" src="http://www.justifiedbyfaith.net/home/180014650/180014650//vimeo_latest_json.js"></script>
<div id="vimeoEmbed">Loading latest video...</div>

Advanced options:

You can use this code on any number of web pages. As currently written the thumbnail though ends up being the same size and source everywhere. If you want more than one source or different sizes, you can set those variables in your .js file and upload different versions. Change the src= in your script call to the various saved .js files.