PHPackages viostream/drupal-viostream-plugin - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. viostream/drupal-viostream-plugin ActiveDrupal-module[Image & Media](/categories/media) viostream/drupal-viostream-plugin ================================= Provides a field formatter to embed Viostream videos in Drupal/GovCMS websites. v1.0.0(2mo ago)63MITPHPPHP >=8.1CI passing Since Feb 19Pushed 2mo agoCompare [ Source](https://github.com/Viostream/drupal-viostream-plugin)[ Packagist](https://packagist.org/packages/viostream/drupal-viostream-plugin)[ Docs](https://github.com/Viostream/govcms-viostream-plugin)[ RSS](/packages/viostream-drupal-viostream-plugin/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (2)Versions (3)Used By (0) Viostream for Drupal/GovCMS =========================== [](#viostream-for-drupalgovcms) [![Build Status](https://github.com/Viostream/govcms-viostream-plugin/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/Viostream/govcms-viostream-plugin/actions)[![Coverage Status](https://camo.githubusercontent.com/b713569eccefec0bf456ef2d676f1f718c9ce28dfa344246b0f942b05d9e2e13/68747470733a2f2f636f6465636f762e696f2f67682f56696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e2f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/Viostream/drupal-viostream-plugin)[![Packagist](https://camo.githubusercontent.com/12564f137a82dfcb4f7d74152d07015416afdccb3eb2349366aebd2382ff6ae1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f76696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e)](https://packagist.org/packages/viostream/drupal-viostream-plugin)[![Packagist Downloads](https://camo.githubusercontent.com/d151a24e96b0231efb9c9f6fdef247dd2adf36f9df9ae1b583b5392677cfafeb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f76696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e)](https://packagist.org/packages/viostream/drupal-viostream-plugin)[![PHP Version](https://camo.githubusercontent.com/c9ce437e86c67fe951e3be342c3651f726d7a8c16d30be6887faa4d35aacbc05/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f76696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e)](https://packagist.org/packages/viostream/drupal-viostream-plugin)[![License](https://camo.githubusercontent.com/1f89d94d9bf5aa06577ab1c765cfe1695840770db3aef79196f0c18d3046093a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f76696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e)](LICENSE)[![Issues](https://camo.githubusercontent.com/eba179095049ca379b7e74e64cb72db7d5e4dbb591d5eb75d3fd37401c32530e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f56696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e)](https://github.com/Viostream/drupal-viostream-plugin/issues)[![Last Commit](https://camo.githubusercontent.com/f3894dc12138aafdad97a0efa0d821b80abfcef379ef80de1fbcf309e184909b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f56696f73747265616d2f64727570616c2d76696f73747265616d2d706c7567696e3f6c6f676f3d676974687562)](https://github.com/Viostream/drupal-viostream-plugin/commits/main) A Drupal module that integrates with the Viostream API to let you browse, search, and embed Viostream videos in your Drupal or GovCMS website. Description ----------- [](#description) The Viostream module connects your Drupal site to the Viostream platform via its REST API. Content editors can browse and search their Viostream media library directly from within Drupal, select videos, and embed them into content fields. The module also provides a field formatter for rendering embedded Viostream video players with configurable options. Features -------- [](#features) - **Viostream API Integration**: Full API v3 client connecting to your Viostream account using HTTP Basic Authentication - **Admin Connection Settings**: Configuration form to enter API credentials with a Test Connection button - **CKEditor 5 Plugin**: Toolbar button to browse and embed Viostream videos inline within rich text content (Drupal 10+) - **Media Browser Widget**: Field widget with a modal-based media browser for searching, browsing, and selecting videos - **Standalone Media Browser**: A dedicated page for browsing your full Viostream media library - **Text Filter**: Converts `` tags to embedded iframes on display - **Field Formatter**: Renders Viostream videos as embedded iframes with configurable player settings - **Responsive Design**: Optional responsive video player with 16:9 aspect ratio - **Customizable Player**: Configure width, height, autoplay, mute, and controls - **Share Link Support**: Supports share.viostream.com URLs for video embedding - **GovCMS Compatible**: Fully compatible with GovCMS distributions Requirements ------------ [](#requirements) - Drupal 10 or 11 - Field module (core) - Filter module (core) - Link module (core) - System module (core) - CKEditor 5 module (core, Drupal 10+ only) - required for the CKEditor toolbar integration - A Viostream account with API access (Access Key and API Key from Developer Tools) Installation ------------ [](#installation) ### Using Composer (Recommended) [](#using-composer-recommended) ``` composer require viostream/drupal-viostream-plugin ``` ### Manual Installation [](#manual-installation) 1. Download the module 2. Extract to your `modules/contrib` directory 3. Enable the module: ``` drush en viostream ``` Or via the Drupal admin interface: Admin > Extend > Enable "Viostream" Configuration ------------- [](#configuration) ### Step 1: Connect to Viostream API [](#step-1-connect-to-viostream-api) Before you can browse and select videos, you need to configure your Viostream API credentials: 1. Navigate to **Admin > Configuration > Media > Viostream Settings**(or visit `/admin/config/media/viostream`) 2. Enter your **Access Key** (starts with `VC-`) from Viostream Developer Tools 3. Enter your **API Key** from Viostream Developer Tools 4. Click **Test Connection** to verify your credentials work 5. Click **Save configuration** The credentials are stored securely in Drupal configuration. The Test Connection button calls the Viostream Account API to verify the credentials are valid. ### Step 2: Set Up a Video Field [](#step-2-set-up-a-video-field) There are three ways to embed Viostream videos in your content: #### Option A: CKEditor 5 Inline Embed (Recommended for Drupal 10+) [](#option-a-ckeditor-5-inline-embed-recommended-for-drupal-10) Embed Viostream videos directly within rich text content using the CKEditor 5 toolbar: 1. **Enable the Text Filter**: - Navigate to: Admin > Configuration > Content authoring > Text formats and editors - Edit your text format (e.g., "Full HTML" or "Basic HTML") - Under **Enabled filters**, check **Viostream Video Embed** - Save the text format 2. **Add the Toolbar Button**: - On the same text format configuration page, in the **CKEditor 5 Toolbar** section, drag the **Viostream Video** button into the toolbar - The button shows a video icon and will appear after you enable the filter - Save the text format 3. **Embed Videos in Content**: - Create or edit any content with a rich text field using that text format - Click the **Viostream Video** button in the CKEditor toolbar - A modal opens showing your Viostream media library - Search, sort, and paginate to find the video you want - Click a video to select it, then click **Select Video** - The video appears as a preview widget in the editor - Save your content - the video renders as an embedded player #### Option B: Media Browser Widget [](#option-b-media-browser-widget) Use the Viostream Browser widget to let editors browse and select videos visually: 1. **Add a Link Field** to your content type: - Navigate to: Admin > Structure > Content types > \[Your content type\] > Manage fields - Click "Add field" - Select "Link" as the field type - Name it (e.g., "Viostream Video") - Save the field settings 2. **Configure the Form Widget**: - Go to: Admin > Structure > Content types > \[Your content type\] > Manage form display - Find your Viostream video field - Change the Widget to **Viostream Browser** - Save 3. **Configure the Display Formatter**: - Go to: Admin > Structure > Content types > \[Your content type\] > Manage display - Find your Viostream video field - Change the Format to **Viostream Video** - Click the settings gear icon to configure player options (width, height, responsive, autoplay, muted, controls) - Save your settings 4. **Add Video Content**: - Create or edit content - Click the **Browse Viostream** button on the video field - A modal opens showing your Viostream media library - Search by title, sort results, and paginate through videos - Click a video to select it - The field is populated with `https://share.viostream.com/{video_key}` - Save your content #### Option C: Manual URL Entry [](#option-c-manual-url-entry) Use the standard Link widget and enter Viostream URLs manually: 1. Add a Link field as described above 2. Keep the default Link widget in Manage form display 3. Configure the Viostream Video formatter in Manage display 4. When creating content, manually enter a `https://share.viostream.com/{VIDEO_ID}` URL ### Standalone Media Browser [](#standalone-media-browser) A standalone media browser page is available at **Admin > Content > Browse Viostream Media** (or visit `/admin/content/viostream/browse`). This lets administrators browse the full Viostream media library without being in a content editing context. Permissions ----------- [](#permissions) The module defines two permissions: PermissionDescription**Administer Viostream**Access the Viostream settings form to configure API credentials**Browse Viostream media**Access the media browser to search and select videosConfiguration Options --------------------- [](#configuration-options) ### Field Formatter Settings [](#field-formatter-settings) SettingDescriptionDefaultWidthPlayer width (%, px, or CSS units)100%HeightPlayer height in pixels400ResponsiveEnable responsive 16:9 aspect ratioYesAutoplayAuto-start video playbackNoMutedMute video by defaultNoShow controlsDisplay player controlsYes### API Configuration [](#api-configuration) SettingDescriptionAccess KeyYour Viostream Access Key (starts with `VC-`)API KeyYour Viostream API Key from Developer ToolsSupported URL Formats --------------------- [](#supported-url-formats) The field formatter recognizes share.viostream.com URLs: - `https://share.viostream.com/{VIDEO_ID}` - `http://share.viostream.com/{VIDEO_ID}` Architecture ------------ [](#architecture) ### Module Structure [](#module-structure) ``` viostream/ ├── viostream.info.yml # Module metadata and dependencies ├── viostream.module # Hook implementations (theme, help) ├── viostream.ckeditor5.yml # CKEditor 5 plugin definition ├── viostream.services.yml # Service definitions (API client) ├── viostream.routing.yml # Route definitions ├── viostream.links.menu.yml # Admin menu links ├── viostream.permissions.yml # Permission definitions ├── viostream.libraries.yml # JS/CSS library definitions ├── config/ │ ├── install/ │ │ └── viostream.settings.yml # Default configuration │ └── schema/ │ └── viostream.schema.yml # Configuration schema ├── src/ │ ├── Client/ │ │ └── ViostreamClient.php # Viostream API v3 client service │ ├── Controller/ │ │ └── ViostreamMediaBrowserController.php # Media browser endpoints │ ├── Form/ │ │ └── ViostreamSettingsForm.php # Admin settings form │ └── Plugin/ │ ├── CKEditor5Plugin/ │ │ └── ViostreamVideo.php # CKEditor 5 plugin (dynamic config) │ ├── Field/ │ │ ├── FieldFormatter/ │ │ │ └── ViostreamFormatter.php # Video embed formatter │ │ └── FieldWidget/ │ │ └── ViostreamBrowserWidget.php # Media browser widget │ └── Filter/ │ └── ViostreamVideoFilter.php # Text filter for ├── js/ │ ├── ckeditor5_plugins/ │ │ └── viostreamVideo/ │ │ ├── src/ # CKEditor 5 plugin ES module source │ │ │ ├── index.js │ │ │ ├── viostreamvideo.js │ │ │ ├── viostreamvideoediting.js │ │ │ ├── viostreamvideoui.js │ │ │ ├── insertviostreamvideocommand.js │ │ │ └── icon.svg │ │ ├── build/ │ │ │ └── viostreamVideo.js # Compiled plugin bundle │ │ ├── webpack.config.js │ │ └── package.json │ ├── viostream-browser.js # Standalone browser page JS │ └── viostream-widget.js # Widget modal browser JS ├── css/ │ ├── viostream.css # Video embed styles │ ├── viostream-browser.css # Media browser / modal styles │ ├── viostream-ckeditor.css # CKEditor 5 widget styles │ └── viostream-widget.css # Field widget styles └── templates/ ├── viostream-video.html.twig # Video player template └── viostream-media-browser.html.twig # Media browser page template ``` ### API Client [](#api-client) The `ViostreamClient` service (`viostream.client`) provides methods for all Viostream API v3 endpoints: - **Account**: `getAccount()` - retrieve account details (used for connection testing) - **Media**: `listMedia()`, `getMedia()`, `ingestMedia()`, `getMediaStatus()` - manage video assets - **Channels**: `listChannels()`, `getChannel()`, `getChannelsByIds()` - manage channels - **Tags**: `listTags()`, `getTagUsage()` - manage tags - **Whitelists**: Full CRUD for whitelists, domains, and media associations Examples -------- [](#examples) ### Responsive Video (Recommended) [](#responsive-video-recommended) ``` Field configuration: - Widget: Viostream Browser - Formatter: Viostream Video - Width: 100% - Height: 400 (ignored when responsive) - Responsive: Yes - Autoplay: No - Muted: No - Show controls: Yes ``` ### Fixed Size Video [](#fixed-size-video) ``` Field configuration: - Width: 640px - Height: 360 - Responsive: No - Autoplay: No - Muted: No - Show controls: Yes ``` ### Auto-playing Muted Video [](#auto-playing-muted-video) ``` Field configuration: - Width: 100% - Height: 400 - Responsive: Yes - Autoplay: Yes - Muted: Yes - Show controls: Yes ``` Troubleshooting --------------- [](#troubleshooting) ### API Connection Fails [](#api-connection-fails) - Verify your Access Key starts with `VC-` - Check that your API Key is correct (from Viostream Developer Tools) - Ensure your server can reach `https://api.app.viostream.com` - Try the Test Connection button on the settings page for diagnostic messages ### Browse Viostream button doesn't appear [](#browse-viostream-button-doesnt-appear) - Ensure the field widget is set to **Viostream Browser** (not the default Link widget) - Clear Drupal cache: `drush cr` - Check that the user has the **Browse Viostream media** permission ### Media browser shows no results [](#media-browser-shows-no-results) - Verify API credentials are configured at Admin > Configuration > Media > Viostream Settings - Test the connection using the Test Connection button - Ensure your Viostream account has media assets ### Video doesn't display [](#video-doesnt-display) - Verify the video ID or URL is correct - Check that the video is accessible and not private - Ensure the field is configured to use "Viostream Video" formatter ### Player controls don't work [](#player-controls-dont-work) - Ensure "Show controls" is enabled in formatter settings - Check browser console for JavaScript errors ### Responsive sizing issues [](#responsive-sizing-issues) - Make sure "Responsive" is enabled in formatter settings - Verify no conflicting CSS is affecting the video wrapper Development ----------- [](#development) ### Running Tests [](#running-tests) ``` # PHPUnit tests (if available) phpunit --group viostream # Code standards check phpcs --standard=Drupal modules/contrib/viostream ``` ### Running Locally [](#running-locally) *Make sure you run npm build on the ckeditor5 plugin if you make changes to the JS source files.* ``` docker build -t viostream-drupal . docker run --rm \ -v $(pwd)/js/ckeditor5_plugins/viostreamVideo/build:/var/www/html/web/modules/contrib/viostream/js/ckeditor5_plugins/viostreamVideo/build \ -v $(pwd)/css:/var/www/html/web/modules/contrib/viostream/css \ -p 8080:80 viostream-drupal ``` See [docker/README.md](docker/README.md) for detailed Docker setup instructions. ### Building CKEditor 5 Plugin JS [](#building-ckeditor-5-plugin-js) Whenever you edit files in `js/ckeditor5_plugins/viostreamVideo/src/` (the CKEditor plugin source), you **must** re-run the JS build before running or committing your code: ``` cd js/ckeditor5_plugins/viostreamVideo npm install # if not already npm run build ``` This command regenerates `build/viostreamVideo.js` (the actual plugin loaded by Drupal and CKEditor). > **Important:** Docker image builds **do not** automatically rebuild the plugin JS. If you modify plugin sources but skip this step, your changes (including bugfixes, new features, or error handling improvements) **will not take effect**. If you ever find that plugin changes don't appear in the editor UI, confirm you have built and committed updated `build/viostreamVideo.js`. #### Pre-commit Safety Check [](#pre-commit-safety-check) A `.git/hooks/pre-commit` script is provided and is enabled by default: - It always runs `npm run build` in `js/ckeditor5_plugins/viostreamVideo` prior to commit. - If the build bundle changes (`build/viostreamVideo.js` modified), your commit is blocked. Run: ``` git add js/ckeditor5_plugins/viostreamVideo/build/viostreamVideo.js git commit ``` - This prevents stale frontend bundles from ever being committed. If you are on Windows or need to re-install the hook, copy or symlink `.git/hooks/pre-commit` from the repository root. Support ------- [](#support) For issues, questions, or contributions: - GitHub Issues: - Viostream API Documentation: License ------- [](#license) This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. Credits ------- [](#credits) Developed for seamless integration of Viostream videos with Drupal and GovCMS. References ---------- [](#references) - [Drupal Documentation](https://www.drupal.org/documentation) - [GovCMS](https://github.com/govCMS/govCMS) - [Viostream API](https://help.viostream.com/api/viostream-api) ### Health Score 38 — LowBetter than 85% of packages Maintenance83 Actively maintained with recent releases Popularity8 Limited adoption so far Community9 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 75% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 89d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/49f4806a1e02127f0cbc4fa9d23259a1d5f56b759d4657724fe1f4dcd8955e2b?d=identicon)[sjauld](/maintainers/sjauld) --- Top Contributors [![sjauld](https://avatars.githubusercontent.com/u/8232503?v=4)](https://github.com/sjauld "sjauld (24 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (6 commits)")[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (2 commits)") --- Tags drupalvideomediaembedgovCMSviostream ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/viostream-drupal-viostream-plugin/health.svg) ``` [![Health](https://phpackages.com/badges/viostream-drupal-viostream-plugin/health.svg)](https://phpackages.com/packages/viostream-drupal-viostream-plugin) ``` ### Alternatives [happyworm/jplayer jPlayer allows you to create a media player with a consistent interface and experience across all browsers. 4.6k114.2k1](/packages/happyworm-jplayer)[dereuromark/media-embed A PHP library to deal with all those media services around, parsing their URLs and embedding their audio/video content in websites. 182530.3k11](/packages/dereuromark-media-embed)[essence/essence Extracts information about medias on the web, like youtube videos, twitter statuses or blog articles. 770562.9k3](/packages/essence-essence)[s9e/text-formatter Multi-purpose text formatting and markup library. Plugins offer support for BBCodes, Markdown, emoticons, HTML, embedding third-party media (YouTube, etc...), enhanced typography and more. 2413.1M29](/packages/s9e-text-formatter)[cohensive/embed Media Embed (for Laravel or as a standalone). 120370.4k](/packages/cohensive-embed)[fg/multiplayer Builds customizable video embed codes from any URL. 446.8k1](/packages/fg-multiplayer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)