> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Cloudinary Video Component


The Cloudinary Video Component is available after you've [installed the cartridge](sfcc_page_designer_setup_and_configuration) and enables you to embed videos from your Cloudinary product environment into pages created with Page Designer. 

## Using the Cloudinary Video Component

The Cloudinary Video Component lets you [choose the video to display](#insert_a_video_from_cloudinary) directly from your Cloudinary Media Library. You can then [add image and text overlays](#add_image_and_text_overlays), [customize the Video Player](#customize_the_video_player),  and [configure other settings](#configure_video_settings) such as the poster image, player options, and transformations to apply to the video and poster image to suit your design.

### Embed a Cloudinary Video Component

To embed a Cloudinary Video Component into your page, in **Page Designer**, select and drag a **Cloudinary Video** from the Components menu.

![Cloudinary Video Component](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742728543/docs/SFCC/add_video_component.png "thumb:c_scale,w_300/dpr_2.0, width: 300, popup:true")

### Insert a video from Cloudinary 

1. To configure the Cloudinary Video Component, click the embedded component to open the **Cloudinary Video Component** configuration panel.
        ![Select a Cloudinary Video Component](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742729036/docs/SFCC/cloudinary_video_component_settings.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")

1. To insert a video from your Cloudinary product environment, click **Choose Video**. The **Media Library** opens.
        
    > **TIP**: See [Commonly used Media Library features](sfcc_page_designer_image_component#commonly_used_media_library_features) for information about the Media Library.

1. Select the video you want to insert and click **Insert**.
        ![Insert a video from Cloudinary](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736634/docs/SFCC/insert_video.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")

### Add image and text overlays

1. To add an image or text overlay, select the **Advanced** button from the configuration panel. 
1. In the **Image Overlay** tab, select the image you want to overlay, then choose its position, opacity and size.
        ![Overlay an image](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742807644/docs/SFCC/video_image_overlay_only.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1. In the **Text Overlay** tab, type the text you want to overlay, and choose the font, position and color. 
        ![Overlay text on a video](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/video_text_overlay.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1. Click **Apply** to save the changes.

### Customize the Video Player

1. To customize the [Cloudinary Video Player](cloudinary_video_player), select the **Advanced** button from the configuration panel.
1. In the **Customize Video Player** tab, choose the theme, font, and a custom logo.
        ![Customize the Video Player](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/video_player_advanced_config.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")

1. Click **Apply** to save the changes.

### Configure video settings

![Configuration panel settings](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/video_component_configured.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")

You can configure other settings in the Cloudinary Video Component configuration panel as follows:

* **Poster image**: The image to display when the video first loads, if it doesn't play automatically.
* **Player options**: Whether to autoplay the video, start muted, loop the video, or show the Video Player controls.
* **Transformation override**: The transformation to apply to the video in [URL syntax](transformation_reference), e.g. `c_fill,w_500/e_accelerate:100`. This overrides any [globally configured transformations](sfcc_page_designer_setup_and_configuration#configure_cloudinary_credentials_and_other_settings_in_the_business_manager) and also any image or text overlays that you've applied.
* **Poster image transformation**: The transformation to apply to the poster image in [URL syntax](transformation_reference), e.g `e_grayscale,bo_5px_solid_black`. This overrides any [globally configured transformation] (sfcc_page_designer_setup_and_configuration#configure_cloudinary_credentials_and_other_settings_in_the_business_manager) for the poster image.