Embed video players in your Bubble app from YouTube, Vimeo, and self-hosted sources using Bubble's built-in Video element and HTML embed. This tutorial covers responsive video sizing, autoplay configuration, lazy loading for performance, and building a custom video gallery with playlists.
Overview: Embedding a Video Player in Bubble
Video content is essential for product demos, tutorials, and media apps. Bubble provides a native Video element for YouTube and Vimeo, plus HTML elements for custom embeds. This tutorial covers both approaches with responsive sizing and gallery features.
Prerequisites
- A Bubble account with an app ready to edit
- Video URLs from YouTube, Vimeo, or a direct MP4 source
- Basic understanding of the Design tab and elements
Step-by-step guide
Add a Video element for YouTube or Vimeo
Add a Video element for YouTube or Vimeo
In the Design tab, click the + icon and search for Video. Drag it onto your page. In the Property Editor, set the Video source to Dynamic link and enter a YouTube or Vimeo URL. The element automatically displays the player. Set it responsive with percentage-based width (100% of parent).
Expected result: A YouTube or Vimeo video plays directly in your Bubble page.
Use an HTML element for custom video embeds
Use an HTML element for custom video embeds
For self-hosted MP4 files or custom players, add an HTML element. Enter a standard HTML5 video tag with controls and a source pointing to your URL. For iframe embeds from other platforms, paste the iframe code directly. Use dynamic data by inserting Bubble expressions.
Pro tip: Add the loading=lazy attribute to iframes to defer video loading until the user scrolls to it.
Expected result: Custom video players render inside the HTML element with full playback controls.
Make the video player responsive
Make the video player responsive
Wrap the Video or HTML element in a Group with Column layout. Set the group to 100% width with a max-width of 800px. For HTML iframes, use a responsive wrapper group with padding-bottom set to 56.25% (16:9 aspect ratio) and position relative, with the iframe at position absolute filling 100% width and height.
Expected result: The video player scales proportionally across desktop, tablet, and mobile screens.
Build a video gallery with playlists
Build a video gallery with playlists
Create a Data Type called Video with fields: title (text), url (text), thumbnail (image), and category (Option Set). Add a Repeating Group showing videos with thumbnails and titles. When a user clicks a thumbnail, set a custom state current_video to the clicked Video. Bind the main player source to the current_video's url.
Expected result: A video gallery where clicking a thumbnail loads that video in the main player.
Add autoplay and playback controls
Add autoplay and playback controls
For YouTube embeds, append autoplay=1 and mute=1 to the URL (browsers require muting for autoplay). For HTML5 video, add autoplay muted attributes. Add custom play/pause buttons using JavaScript workflows if native controls are insufficient.
Expected result: Videos can autoplay on load (muted) and users have full playback control.
Complete working example
1VIDEO PLAYER — WORKFLOW SUMMARY2================================34DATA MODEL5 Video:6 - title (text)7 - url (text): YouTube/Vimeo/MP4 URL8 - thumbnail (image)9 - category (Option Set)1011PAGE LAYOUT12 Main Player: Video element or HTML element13 Source: page's current_video's url14 Playlist: Repeating Group of Videos15 Each cell: thumbnail + title1617WORKFLOW: Select Video18 Trigger: Thumbnail clicked in RG cell19 Step 1: Set state → current_video = Current cell's Video2021HTML5 VIDEO EMBED22 <video controls width="100%" autoplay muted>23 <source src="Dynamic URL" type="video/mp4">24 </video>2526RESPONSIVE WRAPPER27 Group: 100% width, max-width 800px28 Aspect ratio: padding-bottom 56.25% (16:9)Common mistakes when embedding a video player in Bubble.io: Step-by-Step Guide
Why it's a problem: Using autoplay without muting
How to avoid: Always add muted alongside autoplay. Users can unmute manually.
Why it's a problem: Not making video elements responsive
How to avoid: Use percentage-based widths and aspect ratio wrappers.
Why it's a problem: Loading all videos on page load in a gallery
How to avoid: Use thumbnails in the gallery and load the player only for the selected video.
Best practices
- Use Bubble's native Video element for YouTube and Vimeo
- Use HTML elements for self-hosted or custom player embeds
- Always make video players responsive with percentage widths
- Lazy-load video embeds to improve page performance
- Use thumbnails in galleries and load full player only when selected
- Test video playback on mobile devices before publishing
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to embed a video player in my Bubble.io app supporting YouTube, Vimeo, and MP4 files with responsive sizing and a video gallery. How do I set this up?
Add a video player to my page using the Video element. Make it responsive. Create a Video data type and build a gallery with a Repeating Group of thumbnails that loads the selected video in the main player.
Frequently asked questions
Can I upload videos directly to Bubble?
Yes, using the File Uploader. However, storage is limited by plan. For video-heavy apps, use external storage like S3 or Cloudflare Stream.
How do I track video watch time?
Use JavaScript in an HTML element to listen for the timeupdate event and send progress to Bubble via a plugin.
Can I add subtitles?
For HTML5 video, use the track element with a WebVTT file. For YouTube/Vimeo, subtitles are managed on those platforms.
What video formats work in Bubble?
The Video element supports YouTube and Vimeo natively. For HTML5 video, MP4 (H.264) is universally supported.
Can RapidDev help build a video platform?
Yes. RapidDev can build video platforms with upload, transcoding, streaming, playlists, and analytics.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation