Step 1: Install the Plugin Open your Bubble editor.

Go to the Plugins tab.

Click “Add plugins”.

Search for “WGD Advanced Video Player” (or use your private plugin link).

Click Install.

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

Drag the WGD Advanced Video Player element onto your page.

Set the width (e.g., 100%) and optionally allow it to be responsive.

Set the Aspect Ratio Width and Height (e.g., 16 and 9 for 16:9).

Step 3: Configure Optional Styling Inputs
Select the element and customize:

main_color – Primary player color

video_background_color – Background color behind the video

captions_background_color – Caption box color

captions_text_color – Text color for subtitles

video_control_color – Control icon color

video_control_hover_color – Hover effect color for controls

These apply in real time when calling the Update Styles action.

Step 4: Set Up the Workflow Actions
Available Actions:
Go to the Workflow tab, and choose your video player element for any of these actions:

Initialize Player

Required once (e.g., on page load or when the player becomes visible).

Load Video

Loads a video from a URL (YouTube URLs are supported).

Play

Starts or resumes playback.

Pause

Pauses playback.

Skip

Skips forward or backward by a number of seconds (+10, -5, etc.).

Set Volume

Set volume from 0 to 1 (e.g., 0.75 for 75%).

Update Styles

Applies the current styling properties dynamically (used if you change style inputs at runtime).

Step 5: Optional Dynamic Scripting
If needed, expose dynamic data like:

Current video URL

Is playing (via custom state or conditionals)

Step 6: Preview and Test
Preview your app.

Use buttons or triggers to load and control video playback.

Confirm that the video player resizes according to the aspect ratio and respects your color/styling configurations.