✅
Demo to preview the settings
✅
Introduction
This plugin allows you to integrate a Vimeo video player directly into your Bubble application. It enables advanced video playback control, dynamic resizing, and event tracking for more interactive user experiences. The player can be customized to autoplay, loop, mute, or hide controls depending on your needs.
Prerequisites
- A Vimeo Video ID or Vimeo URL.
- Optional: Vimeo account access if you plan to use private or restricted videos.
- Ensure autoplay settings comply with browser restrictions (autoplay may require muted videos).
How to setup
Step 1 – Install the Plugin
- Go to the Plugin Tab
- Open your Bubble Editor.
- Navigate to the Plugins tab on the left panel.
- Add Plugins
- Once in the Plugins tab, click the Add Plugins button.
- Search for the Plugin
- Use the search bar to type Vimeo video player.
- Locate the plugin in the search results.
- Install/Buy
- If the plugin is free, click Install to add it to your application.
- For a paid plugin, click Buy and follow the purchase instructions.
- Payment Information (For Paid Plugins)
- If the plugin is a paid one, fill in your payment details and make payment.
- Charges will be added to your Bubble billing account.
- Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
- Plugin Installed
- Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Vimeo Video Player element in the Elements panel.
- You’ll see one option:
- Vimeo Video Player
- Drag and drop the element onto your job listing page.
Step 3 – Configure Properties (Vimeo player responsive)
Select the Vimeo Video Player element and configure its properties in the Property Editor. Each field corresponds to a specific Vimeo playback setting that defines how your video loads, plays, and interacts on the page.
- Vimeo Video ID: Enter the unique ID of your Vimeo video (e.g.,
76979871). This is required for the player to load the correct video.
- Hash (Private Videos): Add your video’s private hash if the video is restricted or unlisted.
- Auto Play: Automatically starts playing the video once it’s loaded (requires muted playback for browser compatibility).
- Hide Video Controls: Hides Vimeo’s default control bar so you can design a custom playback UI.
- Disable Auto-Fullscreen: Prevents videos from forcing fullscreen on mobile devices, allowing inline playback.
- Muted: Starts video playback with sound turned off. Required if autoplay is enabled on most browsers.
- Loop Video: Restarts the video automatically when it ends for continuous playback.
- Black Bars Around Video: Displays black padding around videos that don’t match the player’s aspect ratio.
- Disable Keyboard Input: Disables keyboard shortcuts like spacebar play/pause and arrow key seeking.
- Start Video At: Defines the exact timestamp (in seconds) where playback should begin.
- Initial Quality: Sets the starting playback quality (e.g., auto, 1080p, 720p) depending on your video setup.
- Dynamic Width : Allows the player to automatically adjust to responsive or dynamic layout values.
- Dynamic Height: Allows the player to automatically adjust to responsive or dynamic layout values.
- Floating Video Position: Choose where the floating mini-player appears (e.g., Bottom Right, Top Left, etc.).
- Floating Video Width (px): Set the pixel width for the floating player when activated.
- Floating Video Height (px): Define the height in pixels for the floating player.
- Floating Video Horizontal Padding: Adds space between the floating player and the screen’s horizontal edge.
- Floating Video Vertical Padding: Adds vertical spacing from the top or bottom edge.
- Floating Video Close Button: Upload or select an image for the floating player’s close icon.
- Floating Video Close Button Width: Adjusts the size (width in pixels) of the close button icon.
- Floating Video Close Button Height: Adjusts the height of the close button icon.
- Text Track Language: Specify the language code (e.g.,
en,fr,es) for subtitles or captions.
- Enable Text Track: Enables subtitle or closed caption display if available.
- Auto-Gen Text Track: Automatically generates captions where supported by Vimeo’s API.
Plugin Element Properties - Vimeo Video Player
Fields
Name | Description | Type |
Vimeo Video ID | Enter the Vimeo Video ID you want to embed (e.g., 76979871). | Text |
Hash (Private Videos) | If embedding a private Vimeo video, enter its hash key. | Text |
Auto Play | Automatically start playback when the video loads. (Note: Some browsers require the video to be muted for autoplay to work.) | Checkbox |
Hide Video Controls | Hide Vimeo’s native player controls — ideal if you plan to use custom play/pause buttons. | Checkbox |
Disable Auto-Fullscreen | Prevent the video from automatically switching to fullscreen on mobile devices. | Checkbox |
Muted | Start the video in a muted state. | Checkbox |
Loop Video | Automatically replay the video once it ends. | Checkbox |
Black Bars Around Video | Maintain aspect ratio by displaying black bars around the video. | Checkbox |
Disable Keyboard Input | Disable keyboard shortcuts for controlling the video (e.g., spacebar, arrows). | Checkbox |
Start Video At | Set the starting time for playback (in seconds or time format, e.g., 90 or 1m30s). | Text |
Initial Quality | Choose the starting playback quality (e.g., auto, 360p, 720p, 1080p). | Dropdown |
Dynamic Width | Enable dynamic resizing of the player’s width based on screen or container size. | Action / Click |
Dynamic Height | Enable dynamic resizing of the player’s height based on screen or container size. | Action / Click |
Floating Video Position | Choose where the floating video appears when scrolling (e.g., Bottom Right, Bottom Left, Top Right, Top Left). | Dropdown |
Floating Video Width (px) | Define the width of the floating video in pixels. | Number |
Floating Video Height (px) | Define the height of the floating video in pixels. | Number |
Floating Video Horizontal Padding | Set the horizontal distance between the floating video and the screen edge. | Number |
Floating Video Vertical Padding | Set the vertical distance between the floating video and the screen edge. | Number |
Floating Video Close Button Image | Upload or select an image to use as the close button icon for the floating video. | Image |
Floating Video Close Button Width | Set the width of the floating video’s close button. | Number |
Floating Video Close Button Height | Set the height of the floating video’s close button. | Number |
Text Track Language | Specify the language code (e.g., en, fr, es) for the subtitle track. | Text |
Enable Text Track | Toggle to enable subtitles or captions for the video. | Checkbox |
Auto-Gen Text Track | Automatically generate subtitles where supported. | Checkbox |
Element Events
Event Name | Description |
Video Ended | Triggered when the video playback reaches the end. Useful for showing a replay button or triggering next actions. |
Started To Play | Fires when the video begins playing after being loaded or resumed. |
Paused | Triggered when the video is paused by the user or programmatically. |
Seek Operation Begins | Fires when the user or script starts seeking to a new position in the video timeline. |
Seek Operation Completed | Triggered when the seek action has finished and the video is ready to continue playing from the new position. |
Playback Position Updated | Continuously fires as the playback position changes — useful for syncing animations or progress indicators. |
Volume Changed | Triggered when the video volume is adjusted. |
Media Loaded | Fires when the video is fully loaded and ready for playback. |
Media Buffering Started | Triggered when the video begins buffering (loading additional data). |
Media Buffering Ended | Fires once buffering completes and playback resumes. |
Fullscreen Started | Triggered when the video enters fullscreen mode. |
Fullscreen Ended | Fires when the video exits fullscreen mode. |
Exposed States
State | Description | Type |
isPlaying | Returns true if the video is playing. | Boolean (yes/no) |
isPaused | Indicates whether the video is currently paused. | Boolean (yes/no) |
Playback Position | The current playback position of the video, in seconds. | Number |
Video Length | The total duration of the video, in seconds. | Number |
Current Volume | The video's current volume level. | Number |
Changelogs
Update 07.08.25 - Version 1.19.0
- Fixed refreshing of "Video Length" state..
Update 20.06.25 - Version 1.18.0
- Bubble Plugin Page Update (Logo).
Update 24.04.25 - Version 1.17.0
- Added "Initial Quality" field, "Set Video Quality" action and new "Quality" field in "Change Video" action.
Update 03.01.25 - Version 1.16.0
- Minor update(Marketing update).
Update 28.11.24 - Version 1.15.0
- Empty API provider removed.
Update 25.07.24 - Version 1.14.0
- Minor update .
Update 24.06.24 - Version 1.13.0
- Updated demo/service links.
Update 26.04.24 - Version 1.12.0
- "Video is Playing" & "Video is Paused" states fixed.
Update 09.04.24 - Version 1.11.0
- minor update.
Update 27.03.24 - Version 1.10.0
- Fixed ios black screen.
Update 21.02.24 - Version 1.9.0
- updated description.
Update 08.07.23 - Version 1.8.1
- Upgraded to latest version of Bubble API.
Update 26.04.23 - Version 1.8.0
- Added "Disable Keyboard Input" Feature.
Update 04.08.22 - Version 1.7.0
- Added Text Track Support.
Update 08.10.21 - Version 1.6.0
- Added Hash field for private videos.
Update 11.06.21 - Version 1.5.0
- Added Event for Media Buffer Ended.
Update 26.01.21 - Version 1.4.0
- Made the "Start Video At" field dynamic.
Update 31.12.20 - Version 1.3.0
- Added Enter Fullscreen and Exit Fullscreen actions.
Update 04.06.20 - Version 1.2.0
- Fixed AutoPlay issue and added Dynamic Width and Height properties.
Update 11.03.20 - Version 1.1.1
- Fixed the Hide Video Controls checkbox.
Update 18.02.20 - Version 1.1.0
- Change Vimeo Id to support Dynamic Values.
Update 05.12.19 - Version 1.0.0
- First Release of the Vimeo Video Player.