Video on Base Toolkit - Version 2.14

Preview this component (Custom Element; v2.3.0; 9/29/2021)

Guidelines using the component

Technical Notes

For readability, this is inside a container that is restricted to 800px. This component will expand to fill the container it is in, and is usually placed in a flex or grid container.

Description

This is a thin wrapper around a video URL that resizes the URL to meet proper dimensions while still filling the entire container. There is also code that will take a raw youtube, vimeo, or MediaSpace URL and convert it to the frame. If you do not include a YouTube, Vimeo, or MediaSpace URL, it will not display. Make sure the video is publically available and is not behind a login.

Note that you should title your video (using the title attribute) so screen readers can read the title and allow the user to choose to hear the video or pass it by.

Component Display

Change Your Content and Options

Template -- enter raw HTML here

Template Options

Important Classes

N/A

Classes

N/A

Attributes

src (URL of the video -- will allow for Youtube or Mediaspace/Kaltura)Test linktitle (Title of the video used for accessibility)

Advanced Options

These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.

Custom Style Tag before text

--il-video-aspect-ratio (Options to change the ratio, 16:9 is the default ratio)

How to add it to your page

Copy and paste this in your page. Remember

Make sure you have updated your component to make sure the below code is completed.
Make sure you have the Header code in your header.

Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.

Copied to clipboard