Video is avalable on Viasat.com. Video can be "in page" or opened into a modal window. Ideally, video files should be uploaded to AEM Assets versus linking to YouTube or other video sources. Additionally, wherever possible, Closed Captioning text should be attached to a video for hearing impaired users.
A video can be played in a modal. A modal is a box that hovers above the page content. A working example is found at the bottom of this page.
Video playing in modal shown here. Launched from a CTA in the hero banner component.
A video modal is launched from various components. You will find an option for certain call-to-action (CTA) buttons that has "Open in modal" as the CTA Link Target.
Before a video can be launched into a modal, it must be built into an Experience Fragment. Experience Fragments are containers with styled content that can be used across multiple pages. As example, you may use the same video player on more than one page, and by creating an Experience Fragment, only need to add/update the video in one place.
The screens below detail how to attach a Video Modal to a CTA, followed by the steps to create the Video Experience Fragment. The video player itself is dropped into a Component called Dynamic Media within the Experience Fragment.
Settings shown here are within the Header with Background Gradient (banner) component
In the CTA URL (example above), choose the path to the Experience Fragment containing your Video.
This view shows the full path to Videos within the Experience Fragments module.
A Dynamic Media component is dragged into the Experience Fragment to hold the video.
The Video is dragged from Assets (left pane) onto a Dynamic Media component inside the Experience Fragment.
Dynamic Media Settings (wrench icon) shown. The Closed Captioning (vtt) file must be uploaded to AEM and its path selected here.
The Video with Text component places a section with centered video, title and description within the page. With this approach, a video can be played directly on the page.
The screens below show how to build the component. The component itself is a container with a Title and Description with another container within it. Inside the container a Dynamic Media component is added to attach the video.
A working example is found at the bottom of this page.
Example of how the Videos with Text component looks on a page.
Clicking Settings (Wrench) on the Video with Text component
Clicking Settings (Wrench) on the Video with Text component
Click here to add the video player inside this container
Select the Dynamic Media option
Drag Video from Assets (left pane) to top area of this box.
Add link to Closed Caption file here.
Please do not edit these examples.
Disclaimer below component title. With longer text. With longer text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.
Aliquam auctor quam vitae aliquam sagittis. Nunc id risus suscipit, pharetra eros at, feugiat erat. Maecenas nulla dui, egestas quis pretium commodo, dignissim non elit.
Follow the link below to return to all components.
