Link to the plugin page: https://zeroqode.com/plugin/youtube-player-for-bubble-mobile-plugin-1750404061198x903521050666636000
Demo to preview the plugin:
Introduction
This plugin provides a seamless way to embed and play YouTube videos directly within your Bubble Native (mobile) app — no coding required. Simply drop the YouTube Player element onto your page and input a video URL, embed link, or video ID to display content instantly. With native mobile compatibility, responsive behavior, and customizable playback settings, this plugin is perfect for showcasing video content, tutorials, trailers, or user-generated media in a smooth, professional format.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app for iOS. Please note that some videos may not be displayed in the mobile version due to the video author’s settings.
How to setup
To start using the YouTube Player plugin:
- Install the plugin and add the “YouTube Player” element to your app page.
- In the element’s “YouTube URL” field, specify a direct link to the video, an embed link, or just the video ID.
- Configure the necessary settings for the plugin element (Mute, Autoplay, Controls, Auto subtitles).
- To customize the player’s controls, you can use the element’s actions (Play, Pause, Stop, Seek, Mute toggle, Playback rate).
Plugin Element Properties
The plugin contains a YouTube Player visual element that should be used on a page to display YouTube videos in mobile applications.
YouTube Player
Fields:
Title | Description | Type |
YouTube URL | Link to YouTube video or ID video | Text |
Autoplay | Automatically play the video when the app is loaded. Only when mute mode is enabled. | Boolean |
Mute | Mute mode | Boolean |
Controls | Show controls | Boolean |
Auto subtitles | Load subtitles automatically | Boolean |
Element Actions
1. Play
Starts video playback if the player is ready.
This action has no additional parameters.
2. Pause
Pauses video playback if the video is currently playing and the player is ready.
This action has no additional parameters.
3. Stop
Stops video playbook if the player is ready.
This action has no additional parameters.
4. Seek
An action to rewind to a certain time in the video.
Fields:
Title | Description | Type |
Seconds | The time position to seek to in seconds | Number |
5. Mute toggle
Toggles between mute and unmute states of the video player.
This action has no additional parameters.
6. Playback rate
Changes the playback speed of the video.
Fields:
Title | Description | Type |
Rate | Playbook speed rate (0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2) | Dropdown |
Exposed states
Name | Description | Type |
mute | Current mute state of the player | Boolean |
current time | Current playbook time in seconds | Number |
player state | Current state of the player (‘playing’, ‘paused’, ‘buffering’, ‘ended’, etc.) | Text |
Element Events
Name | Description |
isReady | Triggered when the YouTube player is ready for interaction. |
Workflow example
- Basic Setup Workflow
- Add the YouTube Player element to your page
- Set the YouTube URL field with your video ID or full URL
- Configure autoplay and mute settings based on your needs
- Use the isReady event to trigger additional actions when the player loads
- Video Control Workflow
- Use Play action to start video playback
- Monitor player state to know when video is playing
- Use Pause/Stop actions for user control
- Implement Seek action for chapter navigation or time-based controls
- Advanced Playback Workflow
- Set up Mute toggle for audio control
- Use Playback rate action for speed controls
- Monitor current time state for progress tracking
- Combine multiple actions for custom player interface
