Step 1: Install the Plugin In your Bubble editor, go to the Plugins tab.

Click Add Plugins and search for "WGD Video.js" or "Video.js".

Click Install next to the plugin provided by WeGetDesign.

Step 2: Add the Video.js Element to the Page
Go to the Design tab.

Scroll to the Visual Elements section.

Drag and drop the WGD Video.js Player element onto your page.

Step 3: Configure the Player Properties
Select the Video.js element, then adjust the following fields in the property editor:

Video Type

Choose between "url", "youtube", or "vimeo" depending on your video source.

Video Source

Input the full URL of your video. Examples:

URL: https://www.example.com/video.mp4

YouTube: https://www.youtube.com/watch?v=dQw4w9WgXcQ

Vimeo: https://vimeo.com/12345678

Autoplay

Enable this if you want the video to play automatically.

Loop

Enable this to make the video repeat automatically.

Muted

Enable this to mute the video by default.

Preload

Choose how much of the video should preload: "auto", "metadata", or "none".

Step 4: Customize with CSS (Optional)
To apply custom styles:

Upload your CSS file to Bubble’s File Manager or host externally.

Use a HTML element to inject the CSS on the page

Step 5: Make It Dynamic (Optional)
You can set the Video Type and Video Source dynamically using Bubble workflows or from dynamic database content.

For example:

Set video type to youtube from a dropdown.

Pull video URLs from a Video data type and bind it to the player.

Step 6: Preview and Test
Click Preview to test playback on desktop and mobile.

Check responsiveness and ensure the video loads and plays as expected.