Dynamic Media

Dynamic Media is a component that can be used for displaying videos or images, but is also the main method for displaying videos saved in the Digital Asset Manager (DAM).

Dynamic Media components require the content to be drag and dropped in from the Assets tab of the Side Panel in order to insert desired content.

A prerequisite is Authors will need videos or images that are saved in the DAM. When uploading videos to the DAM, there are a few considerations to keep in mind:

• Filename: Follow the Naming Convention Guide
• *Captions: Caption files MUST be created for ALL videos, and should NOT be burned into the video file. Rather, these should be included as a separate .vtt file. The WCM Team may be able to assist with their creation, if needed.
• *Upload Resolution: There is no need to upload a 4K video file, as a 1080p or 720p version will likely be sufficient for most user needs.
• *Maximum File Size: There is a maximum file size of 2GB for ALL Asset files.
• Processing: The larger the individual file uploaded, the longer AEM will take to process and encode the video file for use, so expect longer wait times before the file may be used in these scenarios.
• Dynamic Media Limitations: There are a few limitations to how Dynamic Media functions and a few browser + OS combinations that are not supported that AEM Authors should be mindful of.

Configuring the Advanced tab

• Title: Give a title for the component.
• Alt-Text*: Only for images, set an alt-text to be used for the Image.
• URL*: Only for images, allows setting a link on the image.
• Open in*: Only for images. Choose between Same Window or New Window.
• Height: Set desired height, as needed. Leaving this field blank sets this to auto.
• Width: Set the desired width, as needed. Leaving this field blank sets this to auto.
   

Configuring the Dynamic Media tab

The Dynamic Media tab on this component will have different options displayed depending on the type of content loaded; images or videos.

Images - Presets

• Preset Type: Radio selection that allows different image preset applications. Advanced usage.
  • Image Preset: Allows setting of specific component-related presets.
    • Image Preset: NONE by default. Select another preset, if needed.
    • Image Modifiers: Allows setting of additional image modifiers as outlined in Adobe's Experience League Dynamic Media Command reference page.
  • Viewer Preset: Allows additional viewer presets to alter the image for dynamic zooming functionality.
    • Viewer Preset: NONE by default. Options for ZoomVertical_light, Zoom_dark, Flyout, Zoom_light, InlineZoom, and ZoomVertical_dark.
    • Viewer Modifiers: Not used with Images, but displays.
  • Smart Crop: Allows the image to be automatically cropped based on the device pixel ratio.
    • Image Modifiers: Allows setting of additional image modifiers as outlined in Adobe's Experience League Dynamic Media Command reference page.
    • Optimize for higher resolution devices: Allows the image to automatically adjust as-needed based on specific pixel-ratios of higher-end devices.
       

Videos - Presets

• Viewer Preset: Not used at this time. Allows for selection of additional presets, which are currently not used.
• Viewer Modifiers: Special string added to add things like captions and control auto-display functionality of those. See the section below, "Videos - Viewer Modifiers - Adding Captions" for how to set up that value.
   

Videos - Viewer Modifiers - Adding Captions

• Upload the captions file (.vtt) to the location of your choice in the DAM and publish.
• Append the captions file location to "&caption=https://s7d1.scene7.com/is/content/isp/soi/en/web"
  • Example: &caption=https://s7d1.scene7.com/is/content/isp/soi/en/web/web-standards/media/captions/test-captions.vtt
  • Example - Captions Turned ON by Default:
    &caption=https://s7d1.scene7.com/is/content/isp/soi/en/web/web-standards/media/captions/test-captions.vtt,1
• Replace "web-standards/media/captions/test-captions.vtt" with your caption file location.
• Open the page with the video file 
• Open the Dynamic Media (or Dynamic Video) component dialog window and click on the Dynamic Media Settings tab
• Copy and paste the captions URL into the Viewer Modifiers field.

• Save the dialog field.
• A Closed Caption button now appears.

Dynamic Media with a video loaded is displayed below: