# How to embed a video player in Bubble.io: Step-by-Step Guide - Tool: Bubble - Difficulty: Beginner - Time required: 15-20 min - Compatibility: All Bubble plans - Last updated: March 2026 ## TL;DR 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. ## Before you start - 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 ### 1. 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. ### 2. 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. ### 3. 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. ### 4. 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. ### 5. 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 code example File: `Workflow summary` ```text VIDEO PLAYER — WORKFLOW SUMMARY ================================ DATA MODEL Video: - title (text) - url (text): YouTube/Vimeo/MP4 URL - thumbnail (image) - category (Option Set) PAGE LAYOUT Main Player: Video element or HTML element Source: page's current_video's url Playlist: Repeating Group of Videos Each cell: thumbnail + title WORKFLOW: Select Video Trigger: Thumbnail clicked in RG cell Step 1: Set state → current_video = Current cell's Video HTML5 VIDEO EMBED RESPONSIVE WRAPPER Group: 100% width, max-width 800px Aspect ratio: padding-bottom 56.25% (16:9) ``` ## Common mistakes - **Using autoplay without muting** — Modern browsers block autoplay with sound. The video will not play. Fix: Always add muted alongside autoplay. Users can unmute manually. - **Not making video elements responsive** — Fixed-width videos overflow on mobile or leave gaps on large screens. Fix: Use percentage-based widths and aspect ratio wrappers. - **Loading all videos on page load in a gallery** — Embedding many videos simultaneously slows page load dramatically. Fix: 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 ## 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. --- Source: https://www.rapidevelopers.com/bubble-tutorial/embed-a-video-player-in-bubble © RapidDev — https://www.rapidevelopers.com/bubble-tutorial/embed-a-video-player-in-bubble