Build a video streaming platform in Bubble by embedding videos from Vimeo, YouTube, or Mux, organizing them into a content library with categories and playlists, and gating premium content behind subscription tiers. This tutorial covers the complete architecture from video embedding to monetization.
Overview: Video Streaming Platform in Bubble
Building a video platform in Bubble means hosting videos on external services like Vimeo, YouTube, or Mux, then building the browsing, organization, and access control layers in Bubble. This tutorial covers creating a Netflix-style content library with categories, playlists, watch progress tracking, and premium content gating — all without writing code.
Prerequisites
- A Bubble account with user authentication set up
- A video hosting account (Vimeo Pro, YouTube, or Mux)
- Videos uploaded to your hosting service
- Basic understanding of Data Types, Workflows, and Repeating Groups
Step-by-step guide
Create the content data model
Create the content data model
Go to Data tab and create these Data Types. 'Video': title (text), description (text), embed_url (text), thumbnail (image), duration (text), category (Option Set: Tutorial/Course/Webinar/Entertainment), is_premium (yes/no), order (number). 'Playlist': title (text), description (text), videos (list of Video), creator (User). 'WatchProgress': user (User), video (Video), watched_seconds (number), completed (yes/no). Create the Category Option Set with your content categories.
Expected result: Three Data Types and one Option Set are created for the video platform.
Build the video library browsing page
Build the video library browsing page
Create a 'library' page. Add a row of category filter buttons using a Repeating Group of Category options (horizontal layout). When a category is clicked, set a custom state 'selected_category' on the page. Below, add a Repeating Group with data source: Do a search for Video (constraint: category = selected_category, or no constraint if 'All' is selected), sorted by order. In each cell, display the thumbnail as an Image, title, duration, and a premium badge icon (conditional: visible when Video's is_premium is yes).
Expected result: A browsable video library with category filters and thumbnail grid showing all available content.
Create the video player page
Create the video player page
Create a 'watch' page that receives a Video unique ID via URL parameter. Add an HTML element for the video embed. Set its content dynamically: for Vimeo, use an iframe with the embed URL from the Video record. For YouTube, use the standard YouTube embed format. Below the player, display the video title, description, and a Repeating Group showing related videos (same category, exclude current video). Add Previous and Next buttons that navigate to adjacent videos.
1<iframe src="DYNAMIC_EMBED_URL" width="100%" height="500" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>Expected result: A video player page displays the selected video with description and related content.
Track watch progress for each user
Track watch progress for each user
When the watch page loads, search for an existing WatchProgress record (user = Current User, video = Current page's Video). If none exists, create one with watched_seconds = 0. To update progress, use a 'Do every X seconds' workflow event (set to every 30 seconds) that makes changes to the WatchProgress record, incrementing watched_seconds. When watched_seconds exceeds 90% of the video duration, set completed = yes. Display a progress bar on library thumbnails showing completion percentage.
Expected result: The system tracks how far each user has watched each video and shows progress on the library page.
Gate premium content behind subscriptions
Gate premium content behind subscriptions
Add a 'subscription_tier' field to the User data type (Option Set: Free/Basic/Premium). On the video player page, add a conditional: When Current page's Video's is_premium is yes AND Current User's subscription_tier is Free → hide the video player and show a 'Subscribe to Watch' message with a button linking to your pricing page. For the library, show a lock icon on premium video thumbnails when the user's tier does not grant access.
Pro tip: Use privacy rules on the Video type to prevent the embed_url from being exposed to non-subscribers, even through the API.
Expected result: Free users see premium content thumbnails but cannot play the videos until they upgrade.
Build the playlist feature
Build the playlist feature
Allow users to create playlists. Add a 'Create Playlist' button that opens a popup with a title input and a multi-select for videos. The workflow: Create Playlist → title, creator = Current User, videos = selected videos. On the library page, add a 'Add to Playlist' button on each video card. This opens a popup listing the user's playlists — clicking one adds the video: Make changes to Playlist → videos add Current cell's Video. Create a 'playlists' page showing the user's playlists with click-to-play functionality.
Expected result: Users can create, manage, and play playlists of their favorite videos.
Complete working example
1VIDEO STREAMING PLATFORM — ARCHITECTURE SUMMARY2=================================================34DATA TYPES:5 Video: title, description, embed_url, thumbnail, duration,6 category (Option Set), is_premium (yes/no), order (number)7 Playlist: title, description, videos (list of Video), creator (User)8 WatchProgress: user, video, watched_seconds, completed (yes/no)9 User (modified): + subscription_tier (Option Set: Free/Basic/Premium)1011PAGES:12 library — Video grid with category filters + search13 watch — Video player + description + related videos14 playlists — User's playlist list + playlist detail view15 pricing — Subscription tier comparison + payment1617KEY WORKFLOWS:18 Play Video: Navigate to watch page → load embed in HTML element19 Track Progress: Do every 30 seconds → update WatchProgress20 Mark Complete: When watched_seconds > 90% of duration → completed = yes21 Create Playlist: popup form → Create Playlist with selected videos22 Add to Playlist: Make changes to Playlist → videos add Video23 Gate Content: Conditional on watch page hides player for free users2425PRIVACY RULES:26 Video embed_url: visible only when user's tier matches (or video is free)27 WatchProgress: visible only when user = Current User28 Playlist: visible to creator (private) or all users (if shared)2930EMBED FORMATS:31 Vimeo: https://player.vimeo.com/video/{VIDEO_ID}32 YouTube: https://www.youtube.com/embed/{VIDEO_ID}33 Mux: https://stream.mux.com/{PLAYBACK_ID}.m3u8Common mistakes when creating a video streaming platform in Bubble.io: Step-by-Step Guide
Why it's a problem: Hosting videos directly in Bubble's file storage
How to avoid: Always host videos on a dedicated service (Vimeo, Mux, YouTube) and embed them via URL in Bubble
Why it's a problem: Exposing embed_url in the API for premium content
How to avoid: Add a privacy rule on Video that hides embed_url when the user's subscription tier does not have access
Why it's a problem: Not paginating the video library
How to avoid: Set the library Repeating Group to display 12-20 videos per page with pagination or infinite scroll
Best practices
- Host videos on Vimeo Pro or Mux for adaptive bitrate streaming and analytics
- Use privacy rules to hide embed URLs from non-subscribers at the database level
- Paginate the video library to 12-20 items per page for fast loading
- Compress and optimize thumbnail images for quick library browsing
- Track watch progress to enable 'Continue Watching' recommendations
- Use Option Sets for categories to enable fast, WU-free filtering
- Add a search bar with title-based constraints for finding specific videos
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a video streaming platform in Bubble.io with a content library, playlists, watch progress tracking, and premium content gating. My videos are hosted on Vimeo. Can you design the data model and outline the key pages and workflows?
Build a video streaming platform for my app. Create data types for Videos, Playlists, and WatchProgress. Build a library page with category filters, a video player page with embedding, and playlist management. Gate premium content behind a subscription tier.
Frequently asked questions
Can I use YouTube for free video hosting?
Yes, but YouTube adds its own branding and recommendations. For a branded experience without YouTube UI, use Vimeo Pro (hides branding) or Mux (developer-friendly, no UI overlay).
How do I prevent users from sharing video links?
Use Vimeo's domain-level privacy (restrict embedding to your domain only) or Mux's signed URLs that expire. Combine with Bubble privacy rules that hide embed URLs from unauthorized users.
Can I upload videos directly from Bubble?
Not recommended for streaming. You can upload files to Bubble's storage, but they will not have adaptive streaming. Use the Mux or Vimeo API via API Connector to upload directly from Bubble to a streaming service.
How do I add subtitles to videos?
Upload subtitle files (SRT or VTT) to your video hosting service. Vimeo and Mux both support subtitle tracks that appear automatically in the embedded player.
What video hosting service is best for Bubble?
Mux is the most developer-friendly with clean APIs. Vimeo Pro is easiest for non-technical users. YouTube is free but adds branding. Choose based on your budget and branding needs.
Can RapidDev help build a video platform in Bubble?
Yes. RapidDev builds video platforms with advanced features like DRM protection, analytics dashboards, content recommendation engines, and multi-tier subscription management.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation