# URL Media Player

> Discover how to integrate and control multimedia content in PandaSuite with the URL Media Player component, allowing interactions and synchronization with other components.

https://docs.pandasuite.com/essentials/components/url-media-player/

**The PandaSuite URL Media Player component allows you to integrate and control multimedia content hosted on external platforms like YouTube, Vimeo...**

Like any multimedia component (video player, audio player...), you can create markers, add interactions to the multimedia content, and show or hide the player controls.

[Image: Mobile app built with PandaSuite: an article card embeds a YouTube video, a tutorial on sewing a face mask]

> **Info**
>
> Since this video and audio content is online, the user will **need an internet
> connection** to view it in their interface.

> **Warning**
>
> Dailymotion is not currently supported by this component. To display a
> Dailymotion video, please use the Web component with the embed URL of the
> video.

## Add a Url Media Player

Click on the **Components** icon and add the **URL Media Player** component.

[Image: Components menu in PandaSuite Studio, with URL Media Player among the available components]

In the properties, insert the **URL** of the video or audio: this is the URL of the page where the media is hosted.

[Image: YouTube page in a browser: the video address is circled in the URL bar, the URL to paste into the component] Customize
the component properties:

- **Autoplay**: the media starts playing as soon as the component is visible.
- **Loop**: the media automatically restarts when finished.
- **Player Controls**: show or hide playback buttons (play, pause, volume...).

## Link Interactive Actions

The component can trigger and be controlled via **interactive actions**.

### Trigger an Action from the Url Media Player Component

Select the URL Media Player component and go to the Actions tab.

Click the + button and choose from the available triggers:

- **End of Playback**
- **Pause**
- **Start Playback**
- **Time** (the marker)

Add the action of your choice.

[Image: URL Media Player triggers in the Actions tab: Time for the 0:01:09 marker, Start Playback, Pause and End of Playback]

### Act on the Url Media Player Component

Select an object, the trigger, and the action **Interact with a component**.

Available actions:

- **Change Moment**
- **Increase/Decrease Speed**
- **Forward/Backward**
- **Pause**
- **Play**
- **Restart from Beginning**
- **Set Speed**
- **Stop**
- **Go To**

[Image: Interact with a component action on tap: the URL Media Player, picked on screen, offers Change Moment, Play, Pause…]

### Sync with Another Component

To synchronize your component with another (e.g., a scrolling area), insert the **Synchronization** component from **Components**.

In the **Properties** window, click **Add a Component**. Choose the **URL Media Player** and another component from the list. Select the component and click **Sync Time** in the options.

### Add Markers

[Markers](https://docs.pandasuite.com/essentials/interactions/markers/) allow you to define a key moment in the video or audio where you associate an action: a trigger or another action.

To add markers to your video/audio:

- Double-click the component.
- In the left-hand window, use the player to position the file at the desired moment.
- Click the + button to add a marker.

[Image: URL Media Player markers panel: the player on the left and a first marker added at 0:01:09 with the + button]

## Data Exposed by the Component

The **URL Media Player** component provides real-time data that can be used in your project. This data allows dynamic interactions with other elements of your project.

Available data:

- **Total Duration**: the full duration of the media, expressed in seconds.
- **Current Value**: the elapsed time or current playback position.
- **State**: whether the media is currently playing or paused (returns "playing" or "paused").

Example uses:

- Display media progress with a dynamic progress bar.
- Enable a “Next” button only when the video is finished (using a condition based on the component state).
- Sync visual effects with audio/video content (e.g., at specific playback moments).