Virginia Tech®home

Media - External component

The Media - External component is used to provide an embedded player for video and audio content hosted externally via YouTube or via the Kaltura hosted media solution available at video.vt.edu. An Embed iframe option is available to support other external media hosting, e.g., Vimeo, Brightcove, etc.

The Title and Options configuration dialog contains the following options:

  • Component Title* - text input field that is used for the accessible WCAG title for the video. This field is required.
  • CSS Class - text input field for custom CSS and/or utility classes
Media External Component Title and Options configuration dialog
Media External Component Title and Options configuration dialog

The URL and Options configuration dialog contains the following options:

  • URL
    • Media URL - text input field used for https:// URLs to YouTube or Kaltura (video.vt.edu) videos
  • Video Properties
    • Video Aspect Ratio - select pulldown used to choose the aspect ratio for the video. Options include 16:9 (standard for web video); 4:3, 5:3, 1:1, 21:9, or 24:10
  • Google Analytics tracking: checkbox used to toggle the tracking of video events using the Google Analytics
  • Closed Caption file - text input and browse button used to add a /content/dam/... path to a closed caption file. These are normally formatted with a vtt extension.
  • Theme
    • Media Player Theme - select pulldown used to choose a theme for the video player. 
  • Autoplay to show images - checkbox to toggle use of javascript to play the video for a moment to load a poster image for the video once it is ready to play on the page. 
  • Poster image - drop zone for an image file from the Assets sidebar to be used as a Poster image when the video is ready to play on the page.
Media External Component URL and Options configuration dialog
Media External Component URL and Options configuration dialog

The Embed iframe configuration dialog contains the following options:

  • Media "iframe" Embed Code - textarea input field for custom iframe embed HTML code from external video hosting service

NOTE: This option should only be used for services not supported by the URL option. Do not use this for YouTube or Kaltura (video.vt.edu) videos.

Media External Component Embed iFrame configuration dialog
Media External Component Embed iFrame configuration dialog

The Media - External component allows users to feature videos from such third-party hosting sites as YouTube or Vimeo. These external options may be preferred instead of using the Media component.

Features

  • Easy integration of videos from the asset library or video.vt.edu
  • Displays third-party media via iframe
  • Theme selection
  • Aspect ratio selection
  • Google Analytics integration
  • Closed caption file support

Dialog Properties

Title and Options

  1. Component Title - Title of Component
  2. CSS Class - CSS class to be applied to the component

URL and Options

URL

  1. Media URL - the URL for the hosted media. This will only work for assets in the CMS or video.vt.edu (Kaltura)

Video Properties

  1. Video Aspect Ratio

    • 16:9
    • 4:3
    • 3:2
    • 5:3
    • 1:1
    • 21:9
    • 24:10
  2. Google Analytics Tracking - Enables or disables the Google Analytics account used in the Google Analytics component. Use Google Tag Manager for video.vt.edu media

  3. Closed Caption File - Link to an uploaded caption file in the asset library. This typically uses a ".vtt" file extension

Theme

  1. Media Player Theme

    • Beelden
    • Bekle
    • Five
    • Glow (default)
    • Roundster
    • Seven
    • Six
    • Stormtrooper
    • Vapor
  2. Autoplay to show image - Generates a poster image for the player by autoplaying the video and stopping

  3. Poster Image - Upload a custom poster image

Embed iframe

  1. Media "iframe" Embed Code - copy and paste the embed code snippet from the provider in the text area. This will override any settings in the "URL and Options" tab

CSS Classes

  • embed-responsive
  • embed-responsive-16by9
  • embed-responsive-1by1
  • embed-responsive-21by9
  • embed-responsive-4by3
  • mediaexternal
  • parbase
  • section
  • vt-video
  • vt-video-kaltura-player