Skip to main content

Embedding Viostream Videos in Drupal/GovCMS

Learn how to install and use the Viostream plugin for Drupal or GovCMS. Browse, select, and embed videos from your Viostream account.

1. Installing the Viostream Plugin​

The Viostream module integrates your Drupal or GovCMS website with your Viostream account, providing a seamless media embedding experience.

Requirements​

  • Drupal 10 or 11
  • Access to your Viostream account (API credentials required)
  • Field, Filter, and CKEditor modules enabled in Drupal

Installation Steps​

Option A: Composer (Recommended)

composer require viostream/drupal-viostream-plugin

Option B: Manual Installation

  1. Download the module from GitHub or Packagist.
  2. Extract it into your Drupal site's modules/contrib directory.
  3. Enable the module via:
    • drush en viostream
    • or Admin → Extend → Enable “Viostream”

Configuration​

  1. Go to Admin → Configuration → Media → Viostream Settings (/admin/config/media/viostream).
  2. Enter your Access Key (VC-...) and API Key from Viostream Developer Tools.
  3. Click Test Connection to verify credentials.
  4. Click Save configuration when successful.

Tip: Credentials are stored securely in Drupal configuration.

2. Embedding Videos in Drupal Content​

You can embed Viostream videos using one of three main methods:

A. CKEditor 5 Inline Embed (Best for rich editors)​

  1. Enable Video Embed Filter:
    • Go to: Admin → Configuration → Content authoring → Text formats and editors
    • Edit your text format (e.g. “Full HTML”)
    • Under Filters, enable Viostream Video Embed
    • Save
  2. Add Toolbar Button:
    • On the same page, in CKEditor 5 Toolbar
    • Drag the Viostream Video button to the toolbar
    • Save
  3. Embed Videos:
    • Edit content and click the Viostream Video toolbar button
    • Browse/search your Viostream library in the modal, pick a video, insert it
    • The video embed appears as a widget in the editor

B. Media Browser Widget Field​

  1. Add a Link Field:
    • Admin → Structure → Content types → [Your Type] → Manage fields → Add field → “Link”
    • Name it (for example, “Viostream Video”)
  2. Switch Widget to Viostream Browser:
    • Go to: Manage form display for that content type
    • Set your video field’s widget to Viostream Browser
    • Save
  3. Configure Display Formatter:
    • Go to: Manage display for content type
    • Set the field's formatter to Viostream Video (click settings for options)
  4. Add and Embed a Video:
    • Edit/add content, click Browse Viostream
    • Select a video from your library or enter a sharing URL
    • Save

C. Manual Link Entry​

  1. Add a “Link” field as above.
  2. Enter a valid https://share.viostream.com/{VIDEO_ID} link in your content.
  3. In display settings, select Viostream Video formatter for that field.

3. Standalone Media Library Browser​

Browse all videos in your media library at:

  • Admin → Content → Browse Viostream Media (/admin/content/viostream/browse)

4. Troubleshooting & Tips​

  • Verify API credentials with the Test Connection button.
  • The Browse Viostream button only appears if the Viostream widget is enabled.
  • User permissions for Viostream media browser are required.
  • Enable “Responsive” in player settings for mobile-friendly video embeds.

5. Further Information​

For support, contact your Viostream admin or log an issue on GitHub.