Component

Video Feature

Description

The Video Feature component an externally-hosted video on one side and text with a background on the other side. You can designate which side holds the video and which of the themed color choices is behind the text. 

What it looks like

Example image (Dec. 8, 2021, v. 2.4):

Try it out

• Video Feature Component Builder: To see how it works with your own content and images
• Video Feature Preview: To see all the possible color and alignment variations
• Dev Codepen for Video Feature: To experiment with all the code

Sample patterns

(In the examples below, replace bolded elements with your own content.)

This code will create an video feature like the screen shot above, with left video alignment, a blue gradient background, and two buttons:

<il-video-feature src="https://mediaspace.illinois.edu/media/t/1_0o2ypqvp">
<h3>Career Possibilities</h3>
<p>Whether you see yourself working as a veterinarian or running the family farm, a degree from 
Animal Sciences will provide you with a hands-on education that will help you identify and solve 
the challenges of the future. </p>

<a href="#" class="il-button">Career Possibilities</a>
<a href="#" class="il-button">Internships</a>
 
</il-video-feature>

Syntax guide

(In the examples below, replace elements in bold with your own content.) The default syntax:

<il-video-feature src="https://mediaspace.illinois.edu/media/t/1_0o2ypqvp">
<p>Your content here.</p>
</il-video-feature>

The required elements in this syntax are:

• <il-video-feature></il-video-feature> enclosing some content
• <src="some video URL"> to identify the video which should be featured

Options

Align left or align right

• Syntax:

<il-video-feature align="right" src="https://mediaspace.illinois.edu/media/t/1_0o2ypqvp">
<p>Your content here</p>
</il-video-feature>

• Default value: If an alignment is not specified, the positioning will default to placing the video on the left.
• Required: No
• Details: You can position the video to the left or the right. However, if the text is long enough to stretch the container vertically, you can’t adjust the vertical positioning of the video.

Blue, white, orange or solid background

• Syntax:

<il-video-feature background="solid" src="https://mediaspace.illinois.edu/media/t/1_0o2ypqvp">
<p>Your content here</p>
</il-video-feature>

• Color values available:
  • By default, the blue theme is used. The text will be white.
  • The orange theme also produces an orange gradient. The text will be white in some places and black in others because white text on orange backgrounds is often not high enough contrast for accessibility needs.
  • The white theme produces a solid white background with dark blue text.
  • The solid theme produces a solid dark blue background with white text.

• Default value: If nothing else is specified, the block will be the blue gradient.
• Required: No

Video size

• Syntax:

<il-video-feature size="small" src="https://mediaspace.illinois.edu/media/t/1_0o2ypqvp">
<p>Your content here</p>
</il-video-feature>

• Default value: If a size is not specified, the video will take about 1/2 the width of a desktop view of the page.
• Size options:
  • The small size makes the video take about 1/3 of the width of a desktop view of the page.
  • The large size makes the video take about 2/3 of the width of a desktop view of the page.
• Required: No

About this component

• Type: Custom Element
• Introduced in: v2.4.0
• Deprecated?: No