---
title: "Video Player"
description: "Video Player supports different Types of Video, like YouTube, Moving Image, or DAM Video."
path: https://www.eonshowroom.eon.com/en/content-elements/video-player.html
lastModified: 2026-03-04T15:43:24.927Z
---

# Video Player

# Video Player

The Video Player Component can be used to display an Video on a Page.

- Different Types are supported: CVP (Vimdeo), YouTube or DAM Video
- Features a Preview Image
- Video Orientation can be Landscape (16:9) or Portrait (9:16)

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/media-video-player--interactive)

## Solarpanels by eon.de

Video type: YouTube
Video URL: https://www.youtube.com/watch?v=zrDpBf_UnKg

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A9-16?fmt=webp-alpha)

[How to Configure](#how-to)

### Video Management & CVP Support

The Video Player component allows editors to embed videos from **YouTube, AEM DAM,**or **CVP (Vimeo).**


###### Important

If a **Vimeo (CVP)** video does not play, the issue is usually related to **domain whitelisting or permissions**. These settings are managed outside of AEM and must be handled by the **CVP team**.


###### Support

Please send requests to: cvp@eon.com or GSD (Global Service Desk)

##### Contacts

[Dana.Sramata@eon.com](mailto:Dana.Sramata@eon.com)

[Iury.filliessantos@eon.com](mailto:iury.filliessantos@eon.com)

### Inspirations

## Video with German Subtitles & Preview Image

Video type: YouTube
Video URL: https://www.youtube.com/watch?v=xNmf-G81Irs

![Image Alt-Text](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/abstract_patternnetworkredblue1%3A16-9?fmt=webp)

### Usage Rules & Features

##### Features

- Different Types are supported: YouTube, CVP (Vimeo) and DAM Video
- Preview Image is possible

##### Properties

- Autoplay can be configured
- If YouTube Video has Subtitles, they can be activated

##### Design

- Ratio is always 16:9

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | only Edge Cases |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | only Edge Cases |

##### DO's

- Use Headline and Preview Image only for Videos without Autoplay

##### DONT's

- Do not use Landscape Videos in small Grids like 2, or 3 Column Grid, while 4 and 12 Columns should only be used for Special Cases
- Do not use Portrait Videos in large Grids like 8, 9, or 16 Column Grid, while 2 and 6 Columns should only be used for Special Cases

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

![Video Configuration](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/video_settings%3A3-4?fmt=webp)

### Configure Video

Editor need to choose the Orientation of the Video in Video Tab of Video Component, as it can be Landscape (16:9) or Portrait (9:16).

Then, Editor can add a Video. Therefore, a Video Type needs to be choosen. Available Types are:

- YouTube

If YouTube is choosen, Editor must enter a YouTube Video ID. It is also possible to enable Video Subtitles depending on Language Code, as long as it is provided on YouTube.


###### No-Cookie Setting for YouTube

When the *`no-cookie`* property is set on the E.ON video player, YouTube videos are automatically loaded via **youtube-nocookie.com** (e.g. https://www.youtube-nocookie.com/embed/video-id instead of the regular youtube.com domain. This enables YouTube’s privacy-enhanced mode, ensuring no cookies or tracking data are stored until the user interacts with the video.

- DAM Video

If DAM Video is choosen, Editor needs to select a Path to an Asset.

- Vimeo

When selecting Vimeo, the Editor must provide the specific Video URL.

Video Title and Auto Play Option is also available for the different Types. Furthermore, if activated in FoundationNg Site Config, Microscheme Attributes can be rendered.

[Read more about FoundationNg Site Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-site-config.html)

[Read more about Schema.org](https://www.eonshowroom.eon.com/en/aem-basics/schema-org.html)

![Set Headline](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/video_headline%3A1-1?fmt=webp)

### Enter Headline for Video

Furthermore, a Headline can be added to be displayed on Top of the Poster Image. For this Headline a Color can be choosen between White (default) and Red.

#### Keep in Mind

No Headline or Preview Image can be shown on a Video with Autoplay.

![Add Preview Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/video_img%3A3-4?fmt=webp)

### Add Preview Image

In Preview Image, Editor can add and adjust a Preview Image in same Way as for normal Image Component.

The Preview Image must be cropped in 16:9 Format for Landscape Videos and 9:16 Format for Portrait Videos.

Additionally, darken Image for better Readability can be selected or deselected. By Default, Image will be darkened.

[Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html)

[Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html)

[Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html)

#### Keep in Mind

No Headline or Preview Image can be shown on a Video with Autoplay.