Video gallery
The video gallery component is used to display a collection of 3 or more related videos in a single player experience. Currently the video gallery only supports videos hosted on Brightcove.
When to use
- For displaying 3 or more related videos on a page
- For videos hosted on Brightcove
- For videos that are at a 16:9 ratio
When not to use
- If only need to display 1 or 2 videos on the page
- If videos that are unrelated or without a common theme
- If videos are hosted on SundaySky or YouTube
- If videos are at a 1:1 ratio
Anatomy
- Video gallery heading and description: this sets up the collection of the videos to the user, the heading is required while the description can be optional
- Video title and description: this is the heading and any further description or information on the currently playing video, the heading is required while the description can be optional
- Currently playing video: this is where the currently playing video is shown and has the video controls that come from Brightcove, this video does not autoplay. See best practices and guidelines for individual videos here
Transcript: this is the transcript for the currently playing video. The transcript file is copy, that comes in either a word document or PDF, describing what a user actually visually sees on the screen, for example, "woman sits at kitchen table, looking at her laptop computer
NOTE: the transcript file is DIFFERENT than the closed captioning file and is copy describing what a user actually visually sees on the screen. Closed captioning is simply what you hear in the video.- Playlist: interactive list of the other videos that are available to play in the gallery, user can click on these to jump the queue but list plays top to bottom by default. If there are more video thumbnails then the height of the currently playing video elements the panel will be scrollable.
Demos & variations
On a page with left navigation in desktop
Video gallery can be used on pages with left navigation and video gallery heading and description can be left aligned.
Choosing an ACA plan
Watch these short videos to learn about each of our ACA Marketplace plans and how they may be a good fit.
More plan types
On a full-width page in desktop
When using the video gallery component on full-width page we recommend keeping the max-width of the video gallery to 1056px or 10 columns to give it a little breathing room and to keep line lengths at an appropriate size. See a live demo on our IFP ACA homepage.
Tablet and mobile
In tablet and mobile the gallery heading, description and currently playing video elements go full width and the playlist drops below. The playlist box in tablet and mobile has a max-height of 250px and will become scrollable if there are more videos then the max-height.
