emory-background

Video Image Variant

Empowering Patients
Leah's Story
My name is Leah Davis. My advice to people who are newly diagnosed with Leukemia is to have hope. Being given a diagnosis of cancer is not a death sentence.
See Her Story
Doctor
Empowering Patients
Leah's Story
My name is Leah Davis. My advice to people who are newly diagnosed with Leukemia is to have hope. Being given a diagnosis of cancer is not a death sentence.
See Her Story

Developer Notes

  • 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. 

Content Author Notes

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

Screenshot

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

Screenshot

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

Screenshot

4.  Next a thumbnail image should be selected

Screenshot

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

Screenshot

Requirements

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.