Video Image Variant

• The component resides inside the EH Media tab in the Toolbox by the name Video and Image Promo.
• The component has 5 Variants, the one displayed on this page is Video and Image Promo.
• In this variant, the component is divided into two sections (50/50): Video/Image on the left-hand side and Promo on the right-hand side
• Applicable fields for this variant:
  • Title: field to add title, displayed in the promo content section on the right promo section.
  • Subtitle: field to add title, displayed below the eyebrow in the promo content section on the right promo section.
  • PromoContent: RTE field to add description/body, displayed below the subtitle in the promo content section on the right promo section.
  • Link: link field to add button link, displayed at the bottom on the right promo section.
  • PromoImage: field to add Image, displayed on the left side.
  • Youtube video ID: field to add YouTube Video ID, the video will be displayed on the left side.
• CA can choose to display either a video or an image on the left side.
• To display/add a video on the left, then the CA must add the YouTube Video ID in the Youtube video ID field.
• To display/add an image on the left then the CA must select the image in PromoImage field and keep the Youtube video ID field empty.
• In case, when both image and video fields are populated then video will take preference and will be displayed on the left side.
• An example of the component where video plays on the left side is displayed HERE
• An example of the component where the image is displayed on the left side can be seen HERE
• The component uses OOTB video component for YouTube Videos and hence the videos will always play inline.
• The image on the left-hand side expands on hover and is clickable - the link added to the Link field will be added to the image. 

The video image variant is a variant of the Video and Image Promo.

1.  Add the component to the page, when selecting navigate to EH Media and select Video and Image Promo

2.  Once the component is on the page, select the video image variant

3.  Once the variant is chosen, the content can be edited.  A video should be selected to play in the component

4.  Next a thumbnail image should be selected

5.  Lastly a text description is added to complete the component

Video Image Variant:

• The Video Image variant allows for two columns to be used within the content area of any page. 
• The Video Image variant contains the following fields:
  • Video (left)
  • Image (left)
  • Title (right)
  • Subtitle (right)
  • RTE (right)
  • Button Link (right)
• The background is fixed not editable on the right side.
• We will not be design which requires custom styling, client will use OOB You Tube.
• If both image and video links are provided, it will auto default to video.
• Video will be vertically centered.
• 3% on hover, image will expand for visual effect.
• The image is clickable and expands on hover. 
• Right side styling please see: Designs
• This component must follow accessibility standards for alt text, and keyboard navigation. 

Mobile: 

• See requirements above, content is stacked with video/image appearing on top.