Virginia Tech™home

Media - External

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. 

On the page, click and drag the Media-External component to the location where you want the file to appear. 

Properties window

After placing the component on the page, open its properties by clicking on the configure (wrench) icon. 

The window contains three tabs: Title, URL, Embed iFrame.

In the Title tab, give the component a title. This will be helpful if you plan to feature this multimedia on another page by using the reference component.

The title tab of the Media-External component.
The title tab of the Media-External component.

In the URL tab, enter the link to the video you wish to feature. This function works if you're pointing to an external server where the video is hosted or on YouTube. 

The URL tab of the Media-External component.
The URL tab of the Media-External component.

Other attributes beneath the URL tab include:

Video Aspect Ratio: 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: Check this box to track the video plays using the Google Analytics code that was placed using the Analytics component.

Closed Caption file: Upload a closed caption file. These are normally formatted with a vtt extension.

Media Player Theme: Select a theme for the video player.

Autoplay to show images: This option uses javascript plays the video for a moment to load a poster image for the video. 

Poster image: Drag from Assets or Upload Poster Image.

For some third-party sites, such as Vimeo, it's better to embed the iframe of a video player than to feature its URL. If that's the case, select the Embed Iframe tab.

The embed iFrame tab in the Media-External component.
The embed iFrame tab in the Media-External component.

Sites such as Vimeo or YouTube provide iframe code for embedding purposes. Often, that code can be found while looking for a share option on the video itself. 

Once you find the code, copy and paste it into the text field beneath the Embed IFrame tab.

Tip: You may want to use the right-click copy/paste function, or the Cut and Paste options from the browser menu, instead of the keyboard commands.


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