Watch the Newest Vimeo Showcase Reel

I have a new project where my client is requesting to display the latest video from a specific Vimeo Portfolio. I already have a script that can fetch the latest video from the entire account using JavaScript as shown below:

http://codepen.io/buschschwick/pen/pgrmvg

    var vimeoUserName = 'yellowboxfilms';

    // Tell Vimeo what function to call
    var videoCallback = 'latestVideo';
    var oEmbedCallback = 'embedVideo';

    // Set up the URLs
    var videosUrl = 'http://vimeo.com/api/v2/' + vimeoUserName + '/videos.json?callback=' + videoCallback;
    var oEmbedUrl = 'http://vimeo.com/api/oembed.json';

    // This function puts the video on the page
    function embedVideo(video) {
        videoEmbedCode = video.html;
        document.getElementById('embed').innerHTML = unescape(video.html);
    }

    // This function uses oEmbed to get the last clip
    function latestVideo(videos) {
        var videoUrl = videos[0].url;

        // Get the oEmbed stuff
        loadScript(oEmbedUrl + '?url=' + encodeURIComponent(videoUrl) + '&callback=' + oEmbedCallback);
    }

    // This function loads the data from Vimeo
    function loadScript(url) {
        var js = document.createElement('script');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', url);
        document.getElementsByTagName('head').item(0).appendChild(js);
    }

    // Call our init function when the page loads
    window.onload = function() {
        loadScript(videosUrl);
    };

However, I now need to fetch the latest video from a particular portfolio. I came across the API Call for this, but unfortunately, I encountered an authorization error.

http://codepen.io/buschschwick/pen/jWLoWb

var latestVideo = function() {
  var vimeoAPI = 'https://api.vimeo.com/users/414104/portfolios';
  $.getJSON(vimeoAPI).done(function(data) {
    console.log(data);
  })
};

latestVideo();

I suspect that an oAuth token is needed, but my attempts to figure out how to pass it have been futile. The Vimeo API Documentation hasn't been very clear either. Any advice or assistance on this matter would be greatly appreciated. Thank you!

Answer №1

If you're looking for information on Vimeo's authentication process, check out the documentation here:

When it comes to generating a token for your app, you have the option to do it on your app page or on a server.

Keep in mind that Vimeo's token generation does not currently support client side authorization. This means that if you share the token on the client side, anyone could potentially use it to make API calls.

To minimize the risk, consider requesting read-only scopes for your token. However, even with read-only access, the token will still have the ability to access private data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a C# webservice with an additional node incorporation

I have developed a C# service for generating questions and answers. Here is the code for my service: public interface IExamService { [OperationContract] [WebInvoke(Method = "GET",UriTemplate = "/ExamQs",RequestFormat = WebMessageFormat.Json,Respon ...

The radio button allows for the selection of multiple items, rather than just one at a time

https://i.sstatic.net/9MEzS.png I have implemented a radio input as shown below <input type="radio" id={el.name} className="form-check-input" name={el.name} data-count={el.name} value={el.id} onChange={this.select_role.bind(this)} style={{margin: "4px ...

Lua-cjson library successfully required with "cjson", but encounters errors when attempting to call cjson.encode

Attempting to encode/decode JSON in Lua using CJSON has hit a roadblock. The process started with downloading lua-cjson through Luarocks (). In the Lua interpreter, an example from the cjson manual is being used: > local cjson = require "cjson" > v ...

How can one effectively use Ajax to insert data into several tables in ASP.NET MVC?

I am working with two tables called Employees and Contacts. Employees Table: Employee-ID Name Age Military-status Marital-status Contacts Table: ContactID Phone Email EmpID //Has foreign-Key relationship with Employee-ID Each employee can have mult ...

Postpone the appearance of a pop-up message, make it show up only once

Is it feasible to create a pop up that appears after 4 seconds and stays visible until the user interacts with the mouse? The pop up should not appear if the user scrolls before it shows. You can refer to the image for more details on the pop up box :) &l ...

How to efficiently transfer dynamically generated table row data to JavaScript for database submission using the POST method

Currently, I am working with Laravel and facing an issue related to dynamic rows in my form. Each row has its own form with unique values. My goal is to pass the form data along with values to JavaScript when the submit button is clicked without refreshin ...

The success method for fetching data fails to trigger, instead displaying only a 'parsererror' message, despite the browser actually receiving the data

There are two collections in my code, BlueCollection and RedCollection. BlueCollection works perfectly fine as it loads data from an array stored in a variable. However, RedCollection is encountering some problems while fetching data from a different array ...

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

How can I use conditional 'if' statements to import separate modules in Node.js ES Modules?

Recently, I tried out a tutorial that utilises CommonJS for exporting/ importing different keys depending on the environment. However, I am wondering how I can make it compatible with ES Modules import/export instead? This is the code snippet provided in ...

What is the best way to target an HTML attribute using jQuery?

I have customized a Textbox by adding a special attribute: <asp.TextBox MyCustomAttribute="SomeValue"><asp.TextBox> Now, I want to retrieve this value from within an AJAX success function. Please note that I have excluded irrelevant attribut ...

The casting operation failed because the type '_InternalLinkedHashMap<dynamic, dynamic>' cannot be converted to type 'String'

Looking for assistance on how to correctly send a nested JSON object to an API using HTTP in Dart. Below is the code snippet I have been working with: Map m = { "email": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

The outcome of utilizing an AjaxForm is a response from the AjaxForm

This is My Perspective: @foreach(var item in Model) { <tr id="TR@(item.Id)"> @{Html.RenderPartial("_PhoneRow", item);} </tr> } _PhoneRow: @model PhoneModel @using(Ajax.BeginForm("EditPhone", new { id = Model.Id }, new AjaxOptions { Upd ...

Clicking on an ID within a jQuery list will return the value

<ul id='myid' > <li>Apple MacBook Pro</li> <li>Apple iPad Pro</li> <li>Apple iPhone 12 Pro</li> <li>Apple Watch Series 6</li> <li>Apple AirPods Pro</li> </ul> ...

Activate the Jquery-ui Tooltip with a click event

Here is the code I'm using: function DrawTipsProgress(postid, ajaxurl) { var data = { action: 'ajax_action', post_id: postid } jQuery('#dashicon-' + postid).on("click", function () { jQuery.p ...

Highcharts memory leakage issue arises when working with jQuery version 2.X

After extensive testing on my AngularJS application, I have discovered a memory leak when using Highcharts with the latest version of jQuery (2.1.4). Below are links to two plunkers for comparison: Using jQuery 1.8.2: http://plnkr.co/edit/lQ6n5Eo2wHqt35OV ...

Could the issue be related to a bug in the combination of ng-repeat and ngInclude?

I've been experimenting with loading different templates in this manner: <div ng-class="{active:$first,in:$first,'tab-pane':true}" id="{{p.path}}_settings" ng-repeat="p in panes" ng-include="buildPath(p.path)"> </div> Here&apos ...

How to programmatically update one input value in AngularJS and trigger validation as if it was manually entered by the user?

I'm currently using Angular 1.3.0rc2 and facing an issue with setting one input field based on another input field after the blur event. When I try to set the value of an input field that only has a synchronous validator, everything works fine by usi ...

Ways to center align text in a div vertically

I'm working with 2 divs that are floating side by side. The left div contains a part number, which is only one line. The right div holds the product description, which can span multiple lines. I am looking for a way to vertically align the text in t ...

Mule - Delivering data from various streams promptly upon availability

Greetings, Stack Overflow community. I have a website where users can input search terms like product names or categories. This data is then sent to Mule ESB to query multiple databases - one being fast with quick results and the other slow, sometimes tak ...

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...