Vimeo

Open developer.vimeo.com/apps in your browser and sign in with your Vimeo Pro (or higher) account. Click 'Create a new app' in the top-right corner. Give your app a name such as 'Bubble Integration' and a brief description — this is for your records only and does not affect functionality. Click 'Create app.' Once the app is created, you land on the app settings page. Click the 'Authentication' tab. Scroll to the section labeled 'Generate an Access Token.' Under 'Scopes,' select the following: Public (read public video data), Private (read private videos), Edit (update video metadata), Video Files (access downloadable file URLs), and Stats (read view count and engagement data). Select only what your Bubble app needs — you can always revoke and regenerate with different scopes later. Click 'Generate' to create your personal access token. Copy the token immediately — Vimeo will not display it again after you leave this page. Store it somewhere secure (a password manager or a local notes file) before continuing. Note the scopes you selected alongside the token for future reference. Important: this is a personal access token tied to your Vimeo account, not user-specific OAuth. Every API call made with this token acts as your account. If you need user-specific access (letting visitors access their own private Vimeo libraries), you would need to build a full OAuth 2.0 flow — but for the most common Bubble use case (showing your own videos), this personal token is the correct and simplest approach.

In your Bubble app editor, click the Plugins tab in the left sidebar. Click 'Add plugins,' search for 'API Connector' (published by Bubble), and click Install. Close the plugin search modal. With the API Connector installed, click the Plugins tab again and select API Connector from the list. Click 'Add another API' to create a new API definition. Name it 'Vimeo API.' In the 'Shared headers' section, add two headers that will apply to every call you create under this API definition: Header 1: - Key: Authorization - Value: Bearer YOUR_PERSONAL_ACCESS_TOKEN (replace with the token you copied in Step 1) - Check the 'Private' checkbox — this is critical. Marking it Private tells Bubble to keep this header on the server and never send it to the browser. Header 2: - Key: Accept - Value: application/vnd.vimeo.*+json;version=3.4 The Accept header pins the Vimeo API to version 3.4, ensuring consistent JSON response structure. Without it, Vimeo may return different field layouts as their API evolves. Set the 'Authentication' dropdown to 'None' — you are handling auth manually through the header. Leave 'Development base URL' blank for now; you will set the full endpoint URL on each individual call.

1{
2  "shared_headers": {
3    "Authorization": "Bearer <private>",
4    "Accept": "application/vnd.vimeo.*+json;version=3.4"
5  }
6}

Inside your Vimeo API Connector definition, click 'Add another call.' Configure the call as follows: - Name: Get My Videos - Method: GET - URL: https://api.vimeo.com/me/videos In the 'Parameters' section (URL parameters), add these fields. Bubble will append them as query string parameters: - fields: uri,name,description,duration,created_time,stats,privacy,link,pictures (marks this as optional=no, with no default value — you will set it to this string in the call configuration) - per_page: 25 (optional, default 25) - page: 1 (optional, default 1) - sort: modified_time (optional) - direction: desc (optional) The fields parameter is critical for performance. A full Vimeo video object without field filtering can be 20KB or more per video due to extensive metadata. Specifying only the fields your Bubble app displays reduces response size significantly — important for WU efficiency and page load speed. Scroll to the bottom of the call configuration and click 'Initialize call.' Bubble will make a live request to the Vimeo API using your real token. If your Vimeo account has at least one video, Bubble will receive a response and automatically detect the fields in the data array. After a successful response, change 'Use as' to 'Data' so Bubble can use this call to populate repeating groups. Review the detected fields — you should see entries for name, description, duration, uri, link, and nested objects for stats and pictures. If Bubble did not auto-detect nested fields you need, click the pencil icon next to the response definition and define them manually using JSON path notation.

1{
2  "method": "GET",
3  "url": "https://api.vimeo.com/me/videos",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Accept": "application/vnd.vimeo.*+json;version=3.4"
7  },
8  "params": {
9    "fields": "uri,name,description,duration,created_time,stats,privacy,link,pictures",
10    "per_page": "25",
11    "page": "1",
12    "sort": "modified_time",
13    "direction": "desc"
14  }
15}

Vimeo's API does not return a standalone numeric video ID in its responses. Instead, it returns a uri field with a value like /videos/12345678. To embed a video or construct player URLs, you need just the numeric portion: 12345678. In Bubble, you can extract this number using text expressions without any custom code. Wherever you need the video ID — in an iframe URL, in a PATCH call, or in a custom state — apply this expression chain to the uri field from the API response: 1. Start with the API call's uri field value (example: /videos/12345678) 2. Apply :split by '/' — this creates a list: ['', 'videos', '12345678'] 3. Apply :last item — this gives you '12345678' In the Bubble expression editor, this looks like: Get My Videos's data uri:split by "/":last item Create a Custom State on the repeating group's parent page named 'selected_video_id' with type text. When a user clicks a row in the repeating group, trigger a 'Set state' action that sets selected_video_id to this uri-extracted value. The HTML iframe element for the player will then use this state value to construct the embed URL dynamically. You can also store this extracted ID in a Bubble database field if you are caching video metadata for faster page loads — but remember that caching thumbnail URLs (which come from Vimeo's pictures object) is not recommended, as those pre-signed CDN URLs can expire. Store only the video ID and metadata; always fetch thumbnails fresh from the API.

Add a Repeating Group to your Bubble page. In the repeating group's Data source, select 'Get data from an external API,' choose your 'Vimeo API - Get My Videos' call, and set the response list to the data array returned by the API. Bubble will recognize this as a list of video objects. Inside the repeating group cell, add the following elements: Thumbnail image: Add an Image element. Set its data source to Current Cell's Get My Videos's data's pictures. Vimeo returns a pictures object with a sizes array — navigate to sizes, and use an index of 3 or 4 to get a medium-resolution thumbnail (approximately 640px wide). The exact Bubble expression: Current Cell's Vimeo API - Get My Videos's data pictures sizes:item #4 link. Video title: Add a Text element. Set its content to Current Cell's data name. Duration: Vimeo returns duration in seconds as an integer. Format it for display using Bubble's :formatted as expression or a calculated field that divides by 60 and rounds. Privacy badge: Vimeo's privacy object includes a view field with values such as 'anybody,' 'nobody,' 'password,' and 'unlisted.' Display this as a conditional text or color-coded badge using Bubble's :is operator. View count: Navigate to stats.plays to display the view count. stats is a nested object; in Bubble's API Connector response definition, ensure stats.plays is defined as a number field. Click action: Add a 'When this cell is clicked' workflow. The action should be 'Set state' on the page's Custom State selected_video_id, with the value set to the uri-extracted video ID (from Step 4). This triggers the iframe player to update below the repeating group.

Bubble has no native Vimeo video element, so you embed the player using an HTML element with an iframe. This is the standard and fully supported method for Vimeo playback in Bubble. Add an HTML element to your page below the repeating group. In the HTML editor, enter the following iframe markup: <iframe src="https://player.vimeo.com/video/VIDEOID?autoplay=0&title=1&byline=0&portrait=0" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen> </iframe> Replace VIDEOID with a dynamic value from your Custom State. In Bubble's HTML element, click the 'Insert dynamic data' button to insert the selected_video_id Custom State into the src URL at the correct position. For additional admin functionality — updating a video's title or privacy setting from a Bubble form — add a second API Connector call for PATCH /videos/{id}: - Method: PATCH - URL: https://api.vimeo.com/videos/[Dynamic video ID] (use Bubble's dynamic path syntax) - Body type: JSON - Body: {"name": "[new title]", "privacy": {"view": "nobody"}} - Use as: Action Wire the PATCH call to a Bubble form workflow. This lets an admin change video titles and privacy levels from inside your Bubble app without opening Vimeo's dashboard. If you want RapidDev's team to help design a complete video management panel for Bubble — including privacy toggling, bulk metadata updates, and viewer analytics dashboards — book a free scoping call at rapidevelopers.com/contact.

1<iframe
2  src="https://player.vimeo.com/video/[VIDEOID]?autoplay=0&title=1&byline=0&portrait=0"
3  width="100%"
4  height="100%"
5  frameborder="0"
6  allow="autoplay; fullscreen; picture-in-picture"
7  allowfullscreen>
8</iframe>