Component: Video 1.0

This builder will allow you to generate a custom version of the Video component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

aspectratio (attribute)

Override the aspect ratio variable on a single item.

height (attribute)

Override the height on a single item.

width (attribute)

Override the width on a single item.

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-video--aspect-ratio

Aspect ratio of the embedded video.

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

Responsive video wrapper for Illinois Toolkit. This component ensures a consistent size and aspect ratio across breakpoints, but does not supply the video element or its controls.

Full Version: 1.0.0

Type: web component

Date Created: 10/22/2024

Version notes: Known issues: slotted iframe may fail to load in certain cases (https://github.com/web-illinois/ilw-video/issues/12). Workaround: Define video using component attributes.

Github repository: https://github.com/web-illinois/ilw-video/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-video/1.0.0/ilw-video.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-video/1.0.0/ilw-video.css

JSON information: ilw-video.1.0.json