Video Image Promo

• Component resides inside EH Media tab in the Toolbox by the name Video and Image Promo.
• Component has 3 Variants, the one displayed on this page is-  Video and Image Promo.
• In this variant, the component has two sections : Video/Image section and Promo section and they are vertically placed.
• Applicable fields for this variant:
  • PromoContent: RTE field to add description/body.
  • Title: single line text field to add heading.
  • Link: link field to add link to the Title and Image.
  • PromoImage : field to add Image.
  • Youtube video ID: field to add YouTube Video ID.
• In Experience Editor Edit mode, help texts have been added to aid the authoring of this component.
• An example of this variant is shown HERE where three components are placed one beside the other.
• CAs should note that whenever this component is added, it takes the entire width of the container. To make it look like a column card, CAs should apply the appropriate grid settings.
• Video will always play in Modal
• To display/add a video(icon displayed on the image), CA must add the YouTube Video ID in the Youtube video ID field.
• When link is added, the title will be clickable and have a carat at the end. 

1. In EE, Click the "Add Component" Icon and select where you want to place the rendering

2. Select "Video & Image Promo" under EH Media 

4. Ensure "Design" view is enabled in View Tab. Click component to control the variant. 

5. To insert YouTube video, place YouTube video ID. Note: YouTube will take priority over other videos. 

6. Thumbnails are not dynamically pulled. Authors will have to select a thumbnail image to place for video content

7. Heading is managed by a title field. Click placeholder text to edit

8. Click Link placeholder text to add/manage links

9. Promo content is managed by an RTE field. You can edit within experience editor or select the pencil to open up the Rich Text Editor. 

10. Make sure to save and publish changes 

AAG Video Image Promo:

• The CA should be able to edit the following:
  • Image
  • Video (Modal)
  • Title single line text
  • (Link) (Optional link) (H3)
  • Body (RTE)

• The CA should be able to choose either a video or image.
• The CA should be able to choose grid settings to achieve the card layout.
• If CA chooses to add link the image and title would be clickable.
• The CA should be able to use grid size setting.
• Video will play in modal
• The CA will add Youtube ID
• There is no character limit on body, and all images would remain at same height.
• For styling, please see live site
• Upon hover carat and title changes color from AAG green to AAG Orange and extends, see AAG Brand Guidelines
• Telephone numbers will be underlined and click to call.
• Carat is only added if title is clickable
• This component must follow accessibility standards for Alt text, and keyboard navigation

Mobile:

• Content is stacked with image on top

Modal:

• Modal capabilities area function of components which support video fields.
• The CA should be able to add video ID
• The Modal can be triggered on "play  button"
• AAG Video will always play in modal. 
• Modal close button should be positioned above video on top right. 
• See Live Site for functionality (minus user being able to scroll when modal is open)
• The user should be able to close the modal clicking on X button, clicking outside of the modal or pressing ESC
  button on the keyboard. 

Mobile:

• Functionality is same as for desktop
• Modal width should be full width (should cover the screen)