Video Title Teaser
Short Description:
The component can display a video and Title. Content is maintained directly on the site. Component can display YouTube or Dynamic Media video
Marketing purpose:
To display a video to user
You can use this component in two versions:
Inside the grid: Just insert the component inside a container and you are done
As Hero outside the grid: To get this version do the same as previous description. In addition, you need to change the container style from "none" to "Full Width".
YouTube Video
First, of course you must upload the video on YouTube. Use the "Share" functionality to copy the Video ID
The Video ID is found after the URL
The thumbnail image is not required, however it is recommended to use as YouTube uses a generic image taken from the video. Additionally, the thumbnail image usually has better quality than the YouTube preview image.
Dynamic Media
Alternatively you can use videos stored in your Assets which use dynamic media. This is a functionality that AEM offers to deliver exactly the size of the video that each device needs. It supports avi, mp4 and mpg formats.
Video requirements:
Make sure the folder in Assets that contains the video has the proper Profile enabled in Properties.
Sometimes the video may not have been uploaded using the Dynamic Media server. In that case, the video will not work when you click the Play button.
There are two options to fix that:
1- Save the video again in the folder in Assets that contains the configuration. It will cause the video to be uploaded to the DM server.
2.- Activate the Workflow: "Dynamic Media Encode Video" manually.
How to activate Workflow manually.
Select the video you want to upload. Click on "Create" and choose "Workflow".
Choose "Dynamic Media Encode Video"
How to configure Dynamic Media video
Select "Dynamic Media" in "Video Type"
Video Configuration
Thumbnail. Use this image as a preview for your video before it starts playing. The image will disappear as soon as the user clicks on the play button.
Thumbnail Alternative Text
Text description for the video. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank the website.
Hide Controls
Use this option if you prefer to display the video without YouTube controls.
Auto Play
Automatically starting the playback of videos immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed.
Loop
Use this function in case you want that the video automatically starts again after it reach the end.
Start and End time
Sometimes you just want to play a portion of an specific video. This feature allows you to define when it should start and end (values in seconds)
End Screen Experience Fragment
Use this function in case you want to display static information comming from an Experience Fragment such as offers or more information.
ID
Add an ID in case you need for this video
Text
You can add a multi-line title to your video preview image and choose the type of heading you want for SEO purposes. It should not change the design of the title but markup only.
Text position
You can put the title on the top-left of the preview image or bottom-left.
Text Visibility
Usually, the title text disappears when the user clicks on the play button, but if you want, the title can also remain over the video. This functionality can be useful for marketing purposes.
Example Youtube
- Properties
- Markup
- JSON
- hideControls: false
- loop: true
- videoId: OK1Uf5wqzvI
- sling:resourceType: aida-component-library/core/components/content/videoTitleTeaser
- videoType: YT
- autoPlay: false
- enableDataLayer: true
- viewermodfiers: loop=1