To put a video in Bubble, you primarily use the Video element. Here's a breakdown:
Adding a Video Element
- Locate the Video Element: In the Bubble editor, find the "Video" element in the "Visual elements" section of the element palette (left sidebar).
- Drag and Drop: Drag the Video element onto your desired location on your Bubble page.
- Configure the Video Source: In the Video element's property editor:
- Video Source: Choose the source of your video. This can be a direct URL to a video file (e.g., MP4), a YouTube video ID, or a Vimeo video ID.
- YouTube or Vimeo ID: If using YouTube or Vimeo, enter the video ID (the unique identifier in the video URL).
- Upload Video: You can also upload a video file directly to Bubble. However, be mindful of storage limitations on your Bubble plan.
Video Element Settings
The Video element offers various settings to control playback and appearance:
- Autoplay: Set the video to start playing automatically when the page loads.
- Controls: Display the default video controls (play/pause, volume, full-screen).
- Loop: Have the video loop continuously.
- Muted: Start the video muted.
- Aspect Ratio: Maintain the correct aspect ratio of the video.
- Width/Height: Control the size of the video player.
Considerations
- Styling Limitations: Bubble's Video element has limited styling options, especially for YouTube and Vimeo videos. You can adjust the width and height and some basic settings, but the overall player interface is controlled by YouTube/Vimeo.
- Performance: Large video files can impact page load times. Consider using optimized video formats and hosting videos on platforms like YouTube or Vimeo for better streaming performance.
- Dynamic Videos: You can make the video source dynamic by connecting it to data in your Bubble database. This allows you to display different videos based on user interactions or data changes.