Video

Description


The 'Video' component is used to present information or content in the form of videos to make it more convenient for the user.

The video component allows to place a video as a predefined out-of-the-box video element.

Usage


 
  • The video component can be placed as a normal content component directly into the "Content Layout Container" component (as player video)  without column component.
  • The video component can also be placed as a player video in a column control. 
  • It's possible to integrate videos from the following platforms: 
    • YouTube
    • MovingImage
    • AEM DAM Asset (upload or select)

Demonstration (see below)

Youtube Video

MovingImage Video

AEM DAM Asset Video


How to build Video Component

How to embed a YouTube video
How to embed a YouTube video

 

  • Drag and drop the 'Video' component from the Components list
  • Double click the dragged component to get your options to edit
  • Click on the 'Configure' option to start editing.
  • Once the Configure option is open, you can see 2 tabs, 'Video' and 'Settings'

❶ In the first tab, select the type of your video from the options - 'Youtube', 'MovingImage', 'AEM DAM Asset'.

❷ If you choose 'Youtube', fill in its respective youtube ID and select the aspect ratio.

❸ Go to the second tab, 'Settings' and -

  1. select the 'Autoplay' checkbox if you want your video to autoplay.
  2. select the 'Hide on Mobile' checkbox if you want the video to be hidden on mobile.
  3. select the 'Hide Player Controls' checkbox if you want to hide player controls.
How to embed a MovingImage video
How to embed a MovingImage video

❹ If you choose 'MovingImage' as your video type, enter its corresponding video ID.

❺ Repeat the same steps as ❸ in addition to -

  •  select the 'Loop Video' checkbox if you want the video to loop.

 

 

How to embed a video from EAM DAM
How to embed a video from EAM DAM

❻ For 'AEM DAM Asset' as your option, 'select the DAM video path' and drop an asset to be the poster of your video.


❼ Repeat the same steps as ❺ in the 'Settings' tab.