Settings

The component Video was designed to facilitate the display of videos on a page.

These videos can be hosted on the site, on Youtube or Vimeo.

If you want to display multiple videos you can do it in a grid where you configure the number of columns of the grid. The number of columns in the grid will determine the size of the thumbnail for each video. If you have only one video, but want the thumbnail to be small, just configure the component with multiple columns to force the thumbnail size to be to your liking. 

Settings

Component Configuration:

  • Title
  • If title should be displayed
  • Introduction Text (displayed before the video grid)
  • Color Style
  • Component width as a percentage of the total width available for the component
  • Number of columns
  • Column Gap
  • Target Placement (inline, top of page content, bottom of page content, etc.)
  • Container Settings

Container Settings

Container settings allows the configuration of the container housing the component. It allows the following settings:

  • Padding (in px): top, right, bottom, left. Defaults to 0px for all.
  • Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
  • Border (in px): top, right, bottom, left. Defaults to 0px for all.
  • Border Radius (in px): defaults to 0px.
  • Border Color
  • Background
    • Color
    • Text Color
    • Extend text color to items or not
    • Opacity (%)
    • Blur (in px)
    • Media (image / video)
      • Parallax Effect (for Image only)

Item Configuration

  • Title
  • Remote Video URL (Youtube or Vimeo)
  • Media Video (hested, Youtube or Vimeo)
  • Video Description

Example of Video Grid

This example was configured with 3 videos in a 4 columns grid, 16px column gap, color blue and 80% component width.

The grid displays thumbnails that when clicked open the video on overlay.

Container settings is used to set the background color to a light gray, 10px orange borders left and right and padding all around. The text color is set to a darker shade of orange and this color is extended into the video items.

Video 1
Video 2
Video 3

Example of single Video

When the component contains a single video in a single column, the video is displayed directly in the page, not displayed in overlay. This example is configured with component width set to 60%.

Video 1