# Video Player > This guide details the Video Player component in PandaSuite, a tool that allows integrating videos into your interface with customizable features like autoplay, looping, and player controls, enabling unique interactive experiences. https://docs.pandasuite.com/essentials/components/video-player/ **The Video Player component allows you to integrate videos directly into your interface, with the ability to customize the player's appearance and associate various actions with the video, such as play, pause, or jumping to a specific point.** [Image: Video player in a pop-up of a tablet app: a man speaks to camera, with playback controls, over a mosaic of portraits] ## Use cases This component is ideal for displaying videos within your design without imposing a full-screen mode, unlike the [Full Screen Video](https://docs.pandasuite.com/essentials/components/fullscreen-video/) component, which automatically launches the video in full-screen mode over the interface. Here are some examples of usage: - **Background video**: Use a video as a background to enhance your interface. Disable controls, enable autoplay, and loop for a smooth and immersive effect. - **Video in a pop-up**: Display a video in a pop-up to highlight specific content, such as a tutorial or demonstration. - **Interactive video**: Link markers or triggers to your video to enable interactions, such as displaying information or navigating through content. ## Setting up the component Before inserting a video, import the video file into the PandaSuite Files window. Accepted formats include MP4, AVI, WMV, MOV, FLV, MKV, MPG, and MPEG. For videos hosted on YouTube or Vimeo, you must use the [URL Media Player](https://docs.pandasuite.com/essentials/components/url-media-player/) component. To add the Video Player to your project, click on **Components** in the interface, then insert the **Video Player**. In the properties, select the desired video file as the source. The **Video Player** component stores the video within the application, making it available offline for the user. Video quality can be adjusted to balance visual quality and file size. PandaSuite creates optimized versions according to the selected quality, and caps the result according to the source video resolution so the video is not upscaled beyond its original quality. For lighter applications, choose the lowest quality that still looks good at the size where the video appears. When your project is hosted by PandaSuite, these videos are delivered through a global CDN, so high traffic and many simultaneous viewers are handled for you (see [Hosting and performance](https://docs.pandasuite.com/essentials/web-publishing/hosting-and-performance/)). Use the [URL Media Player](https://docs.pandasuite.com/essentials/components/url-media-player/), which requires an internet connection, for true adaptive streaming or a very large video catalog you prefer to host elsewhere. When inserting a **Video Player**, the ratio is fixed, which may result in black bars if the ratio does not match the original video. You can resize the player using layout options and by unlocking the lock icon. To give the player the ratio of the video again, click **Adapt to Video** next to **Adapt Size**. A useful tip is to transform the video into a [Group](https://docs.pandasuite.com/essentials/components/group/) and use masking options to modify the ratio. [Image: Square Video Player with black bars above and below a garden video; the open lock and the Adapt to Video button are framed] ## Component Features ### Properties The Video Player offers several properties to customize its appearance and behavior: - **Source**: Select the video file to play. - **Quality**: Choose the playback quality (SD 240p, SD 360p, MD 480p, HD Ready 720p, Full HD 1080p, UHD 4K 2160p). The selected quality defines the maximum generated version and is capped by the source video resolution. - **High precision seeking (HPS)**: Enables precise navigation in the video, useful for creating specific markers. - > **Warning** > > Note: This option may increase the video's size. - **Player controls**: Option to display or hide buttons such as Play, Pause, Forward, Rewind, Full Screen, and the playback slider. - **Auto play**: Automatically starts the video when the user enters the interface. - **Loop**: Automatically repeats the video after playback. - **Volume**: Default volume setting (1 corresponds to the video's initial volume). - **Speed**: Set the default playback speed (1 equals normal speed). - **Default time**: Specify a precise starting point in the video based on predefined markers. To automatically play a video, enable the "Auto Play" option in the component's properties. However, note that many web browsers, such as Firefox and Chrome, block autoplay without prior user interaction. To display a video in a pop-up, integrate the Video Player component within a Pop-up. You can customize the background color, blur level, and close options of the pop-up. ### Trigger Events The Video Player can also act as a trigger for various actions. Available triggers include: - **Start Playing** - **Pause** - **Stop Playing** - **End Playing** ### Interactive Actions Actions associated with the Video Player include: - **Play/Pause** - **Play** - **Pause** - **Stop** - **Forward** - **Rewind** - **Restart** - **Enter/Exit Full Screen** - **Set Volume** - **Increase Volume** - **Decrease Speed** - **Set Speed** - **Increase Speed** - **Decrease Speed** ### Advanced Interactions ### Markers It is possible to create [markers](https://docs.pandasuite.com/essentials/interactions/markers/) to trigger actions at specific points in the video or to move the playback to a specific moment. To create a marker, go to the component's Properties window and click "Edit." Once markers are created, they can be used as triggers in the Actions window. You can also generate these markers from a data source. Create one marker, choose **Enable source**, set its **Source**, then bind **Time** to a numeric field expressed in seconds. For the full workflow, see [Markers](https://docs.pandasuite.com/essentials/interactions/markers/). ### Synchronization **The Video Player can also be synchronized with other components, such as the Timer or Audio. Available synchronization parameters include:** - **Time** - **Volume** - **Speed** - **Markers** These parameters are accessible from the component's Properties window in the [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) section. ## Best practices and tips The **Video Player** component does not allow for integrating videos with a transparent background due to technical limitations of common video formats (such as MP4 or AVI). If you want to include an animation or a video with a transparent background, here are two possible alternatives: - [**Image sequence**](https://docs.pandasuite.com/essentials/components/image-sequence/): Use an image sequence exported from your animation software (like After Effects). This format enables you to display an animation while maintaining transparency. Import the images into PandaSuite and set them up as an animation. - [**Lottie Animation**](https://docs.pandasuite.com/essentials/components/lottie/): If your animation was created in a tool compatible with the Lottie format, this option is perfect. Lottie is a lightweight vector animation format that supports transparency and seamlessly integrates into PandaSuite via the Lottie Animation component. ## Silent mode on iOS On iOS devices (iPhone/iPad), the [physical silent switch](https://support.apple.com/fr-afri/105103) (located on the side of the device) can prevent sound from playing, unless you enabled the **Audio background** option.