Drupal is a registered trademark of Dries Buytaert
drupal 11.3.12 — Update released for Drupal core (11.3.12)! drupal 11.2.14 — Update released for Drupal core (11.2.14)! drupal 10.5.12 — Update released for Drupal core (10.5.12)! cms 2.1.3 — Update released for Drupal core (2.1.3)! drupal 10.5.11 — Update released for Drupal core (10.5.11)! drupal 11.3.11 — Update released for Drupal core (11.3.11)! drupal 11.2.13 — Update released for Drupal core (11.2.13)! drupal 10.6.10 — Update released for Drupal core (10.6.10)! cms 2.1.2 — Update released for Drupal core (2.1.2)! drupal 11.1.10 — Update released for Drupal core (11.1.10)! drupal 10.5.10 — Update released for Drupal core (10.5.10)! drupal 10.4.10 — Update released for Drupal core (10.4.10)! drupal 11.2.12 — Update released for Drupal core (11.2.12)! drupal 11.3.10 — Update released for Drupal core (11.3.10)! drupal 10.6.9 — Update released for Drupal core (10.6.9)! drupal 10.6.8 — Update released for Drupal core (10.6.8)! drupal 11.3.9 — Update released for Drupal core (11.3.9)! drupal 11.3.8 — Update released for Drupal core (11.3.8)! drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)!
← All modules

videojs_media

No security coverage
View on drupal.org

Overview

The VideoJS Media module is an ADA/508-compliant, responsive media player that works well with the Media and Media Library modules in Drupal core. VideoJS is a very mature, open-source video library primarily sponsored by Brightcove, with a wealth of plugins.

Without the use of a media player as this module provides, by default, visitors to your website will experience audio/video media displayed using whatever internet client-browser is in use, and under its own negotiated terms. This module provides Drupal site builders and developers complete control while delivering ease-of-use to content managers.

VideoJS Media is the modern successor to the VideoJS Mediablock module, superseding it entirely. Where VideoJS Mediablock delivered players as Drupal blocks, VideoJS Media rebuilds that functionality from the ground up around a bundle-based content entity architecture — giving site builders all the power of Drupal's entity system (Views, Entity References, JSON:API, Content Moderation, and more) for video and audio. If you are currently using VideoJS Mediablock, see the companion VideoJS Media Migrate module to migrate your existing content.

Features

VideoJS Media provides five ready-to-use media bundles (Local Video, Local Audio, Remote Video, Remote Audio, and YouTube), each with only the fields it needs — no hidden fields, no custom AJAX callbacks on the add/edit form. Support is included for every format the VideoJS library supports. Enabling this module gives you:

  • Content entity architecture — VideoJS Media items live at /admin/content/videojs-media alongside nodes and Media items. Create once, reference everywhere.
  • Bundle-based field model — each media type (local video, YouTube, remote audio, etc.) carries only its relevant fields, keeping forms clean and data tidy.
  • Granular per-bundle permissions — independently control who can create, edit, delete, or view each media type, so editors can manage YouTube videos without touching uploaded audio files.
  • Native view modes per bundle — ships with Default and Teaser modes; add Compact, Player-only, or any custom mode via the standard Manage Display UI.
  • First-class Views support — filter by bundle, expose bundle-specific fields, build media libraries or channel listings with no workarounds.
  • Entity Reference ready — attach VideoJS Media to nodes, Paragraphs, or any entity using a standard Entity Reference field; supports autocomplete, Inline Entity Form, and Entity Browser widgets.
  • Block plugin — place any VideoJS Media item directly into any block region via Structure → Block layout.
  • Full Entity API — revisions, translations, Content Moderation workflows (Draft → Review → Published), REST/JSON:API out of the box.
  • ADA/508 compliant — WebVTT subtitle/caption track support on all bundles; YouTube bundle also supports native YouTube captions via the IFrame Player API.
  • Responsive & mobile-friendly — fluid aspect-ratio sizing and a touch-optimised mobile UI (tap-to-seek, double-tap, fullscreen-on-rotate) powered by videojs-mobile-ui.
  • Keyboard hotkeys — arrow keys to seek, volume up/down, M to mute, F for fullscreen, number keys to jump to percentage positions.
  • Auto-pause behaviours — only one player plays at a time; optional viewport monitoring pauses players scrolled out of view.
  • SDC (Single Directory Component) theming — override the player component in your theme without touching the module; CSS custom properties expose accent colour, control bar height, and more.
  • Search API integration — index VideoJS Media entities naturally as content.
  • Comprehensive test suite — 99 Kernel and Functional PHPUnit tests covering entity CRUD, per-bundle access control, admin UI, and block rendering.

Use this module when you need reusable, structured video or audio content that integrates deeply with Drupal's content workflows — not just a block you drag onto a page.

Post-Installation

After enabling the module with drush en videojs_media:

  1. Install VideoJS libraries. The module ships without node_modules/. Run npm install from inside the module directory:cd web/modules/contrib/videojs_media && npm install
  2. Configure secure file uploads (recommended). At /admin/config/media/file_upload_secure_validator, add the MIME types for video, audio, and WebVTT files listed in the README.
  3. Grant permissions at /admin/people/permissions — filter by "VideoJS Media" to see per-bundle create/edit/delete/view permissions.
  4. Create VideoJS Media items at Content → VideoJS Media → Add VideoJS Media. Choose a bundle (Local Video, YouTube, etc.), fill in the source field, optionally add a poster image and subtitles, and save.
  5. Reference from content. Add an Entity Reference field (target type: VideoJS Media) to any content type via Structure → Content types → Manage fields. Set the display to "Rendered entity" and choose a view mode.
  6. Or place a block. Go to Structure → Block layout → Place block, search for "VideoJS Media", and select a media item and view mode.

Bundle types are managed at /admin/structure/videojs-media/types. Custom bundles (e.g., Vimeo) can be added there and extended with custom fields via the standard Field UI.

Additional Requirements

  • Drupal ^10.3 or ^11
  • PHP with the fileinfo extension
  • NPM (to install VideoJS libraries after module installation)

Drupal core modules required (all included in core): Config, Field, Media, Media Library, Serialization, File, Link, Text, Options, Taxonomy. The one contributed module dependency is File Upload Secure Validator. It is recommended for validating uploaded media files. The module will function without it, but file upload security validation will be skipped.

Recommended modules/libraries

  • Inline Entity Form — embed the VideoJS Media creation form directly inside a node edit form.
  • Entity Browser — advanced media selection modal for Entity Reference fields.
  • Search API — index and search VideoJS Media entities alongside other content.
  • Content Moderation (Drupal core) — apply editorial workflows per bundle.

Supporting this Module

Both VideoJS Media and its predecessor VideoJS Mediablock are maintained as volunteer open-source contributions. If this module saves you time on a project, consider:

  • Buying me coffee ☕.
  • Filing well-described bug reports and feature requests in the issue queue.
  • Submitting merge requests for fixes or improvements.
  • Listing your organisation as a supporting organisation on the project page.

Community Documentation

Activity

Total releases
2
First release
Jun 2026
Latest release
18 hours ago
Release cadence
0 days
Stability
50% stable

Releases

Version Type Release date
1.0.0 Stable Jun 17, 2026
1.0.x-dev Dev Jun 17, 2026