Mixed Media: Video Player

This component displays a video for users to watch.

Mixed Media: Video Player

This is a YouTube video

Mixed Media: Video Player

This is a Vimeo video
1:03

Mixed Media: Video Player

This video is from the DAM
1:20

Usage Criteria

This component allows users to watch a video using the player provided by the platform it is hosted on.

Do's and Don'ts

  • Do not have multiple instances of this component stacked next to each other; please have dividing content in between if it will be used more than once.

Design Notes

When pairing video with content, ensure that it is clear which content the video relates to. For example, if there is text at the top and bottom of the video but the video is related to only the top paragraph, make sure that there are clear dividers of the different sections.

This is only necessary if the video is paired with a specific section of content (ie. the Careers Overview page co-op video is a good example of this).

Configurable Options

This component has options to configure the type of video: DAM, YouTube, or Vimeo. DAM videos can be manually uploaded or selected from a folder, whereas the YouTube and Vimeo videos will require a Video ID. These specific fields will appear after a video type has been selected.

The video thumbnail can be overridden using an uploaded image.

Developer Notes

Type
Name
AEM Component Name

Mixed Media: Video Player

Code Base Name

video

resourceSupertype
 
SCSS Attributes

video.scss

JavaScript

video.js

Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/mixed-media/video-player

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0