PHPackages                             s3rgiosan/wp-media-chrome - 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. [File & Storage](/categories/file-storage)
4. /
5. s3rgiosan/wp-media-chrome

ActiveWordpress-plugin[File & Storage](/categories/file-storage)

s3rgiosan/wp-media-chrome
=========================

1.4.1(1mo ago)2356MITPHPPHP ^7.4|^8.0

Since Mar 2Pushed 3w ago1 watchersCompare

[ Source](https://github.com/s3rgiosan/wp-media-chrome)[ Packagist](https://packagist.org/packages/s3rgiosan/wp-media-chrome)[ GitHub Sponsors](https://github.com/s3rgiosan)[ Fund](https://ko-fi.com/s3rgiosan)[ RSS](/packages/s3rgiosan-wp-media-chrome/feed)WikiDiscussions main Synced today

READMEChangelog (7)Dependencies (6)Versions (8)Used By (0)

Media Chrome for Embed Blocks
=============================

[](#media-chrome-for-embed-blocks)

> Enhance your video and audio blocks with custom web components from Media Chrome.

[![Try in WordPress Playground](https://camo.githubusercontent.com/0e14183f548eb9dfe684735d24fdc74446b0cd73ee1558f93f10a2ec82ceea6a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547279253230696e2d576f72645072657373253230506c617967726f756e642d3338353845393f6c6f676f3d776f72647072657373266c6f676f436f6c6f723d7768697465)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/s3rgiosan/wp-media-chrome/main/.wp-playground/blueprint.json)

Description
-----------

[](#description)

Media Chrome for Embed Blocks brings the power of [Media Chrome](https://www.media-chrome.org/) to WordPress embed blocks. It enhances built-in video and audio embed blocks with custom web components, improving player controls, accessibility, and user experience. No setup required — just activate the plugin to enhance media blocks with better controls, improved accessibility, and a modernized playback experience.

Supported Media Blocks
----------------------

[](#supported-media-blocks)

- [YouTube Embed](https://wordpress.org/documentation/article/youtube-embed/)
- [Vimeo Embed](https://wordpress.org/documentation/article/vimeo-embed/)
- [Wistia Embed](https://github.com/s3rgiosan/wistia-embed-block)
- [Spotify Embed](https://wordpress.org/documentation/article/spotify-embed/) (\*)

(\*) **Spotify support is disabled by default** due to its limited customization options and UI. To enable it, see the [Spotify](#spotify) section below.

Requirements
------------

[](#requirements)

- WordPress 6.7 or later
- PHP 7.4 or later

Installation
------------

[](#installation)

### Manual Installation

[](#manual-installation)

1. Download the latest release ZIP from the [Releases page](https://github.com/s3rgiosan/wp-media-chrome/releases/latest).
2. Go to Plugins > Add New > Upload Plugin in your WordPress admin area.
3. Upload the ZIP file and click Install Now.
4. Activate the plugin.

### Install with Composer

[](#install-with-composer)

To include this plugin as a dependency in your Composer-managed WordPress project:

1. Add the plugin to your project using the following command:

```
composer require s3rgiosan/wp-media-chrome
```

2. Run `composer install`.
3. Activate the plugin from your WordPress admin area or using WP-CLI.

Quick Start
-----------

[](#quick-start)

Once activated, the plugin automatically enhances supported media blocks. Customization is optional but available via the block editor settings or `theme.json`.

To customize a media player:

1. Insert a supported media block
2. Select the block to reveal its settings in the block editor sidebar
3. Open the Media Chrome settings panel in the sidebar to enable or disable autoplay, playback speed adjustments, or fullscreen mode.

Block Editor
------------

[](#block-editor)

### UI Settings

[](#ui-settings)

> What options users see in the editor.

UI settings control which customization options appear in the block editor. They do not affect the media player's behavior on the frontend — only what users can modify.

By default, all customization options are enabled. To limit available options, add the following to your `theme.json` (example shows all options enabled for the video embed block):

```
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 2,
  "settings": {
    "custom": {
      "mediaChrome": {
        "ui": {
          "embed": {
            "video": {
              "muted": true,
              "controls": true,
              "playsInline": true,
              "preload": true,
              "poster": true,
              "autohide": true,
              "playButton": true,
              "seekBackwardButton": true,
              "seekForwardButton": true,
              "muteButton": true,
              "volumeRange": true,
              "timeDisplay": true,
              "timeRange": true,
              "playbackRateButton": true,
              "fullscreenButton": true,
              "airplayButton": true
            }
          }
        }
      }
    }
  }
}
```

### Preset Settings

[](#preset-settings)

> What default values are used when no user preference is set.

Preset settings define default values for media player options when no user preference is set. If a user customizes a setting in the block editor, that value takes precedence. If no preset is set in `theme.json`, the plugin uses built-in defaults (listed in [Options](#options)).

Example video embed preset configuration for your `theme.json`:

```
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 2,
  "settings": {
    "custom": {
      "mediaChrome": {
        "presets": {
          "embed": {
            "video": {
              "autohide": 2,
              "muted": false,
              "controls": true,
              "playsInline": false,
              "preload": "metadata",
              "poster": "",
              "playButton": true,
              "seekBackwardButton": true,
              "seekForwardButton": true,
              "muteButton": true,
              "volumeRange": true,
              "timeDisplay": true,
              "timeRange": true,
              "playbackRateButton": true,
              "fullscreenButton": true,
              "airplayButton": false
            }
          }
        }
      }
    }
  }
}
```

Options
-------

[](#options)

### Embed

[](#embed)

#### `autohide`

[](#autohide)

Number of seconds after which controls auto-hide when inactive. Set to `-1` to disable auto-hide.

Default: `2`

#### `muted`

[](#muted)

Determines if media starts muted.

Default: `false`

#### `controls`

[](#controls)

Toggles the display of media controls.

Default: `true`

#### `playsInline`

[](#playsinline)

When enabled, videos play inline on mobile devices rather than opening in fullscreen. Only available for embed video blocks.

Default: `false`

#### `preload`

[](#preload)

Defines the content that is preloaded. Options include `'auto'`, `'metadata'`, and `'none'`.

Default: `'metadata'`

#### `poster`

[](#poster)

URL for the poster image displayed before playback starts. Only available for embed video blocks.

Default: `''`

#### `playButton`

[](#playbutton)

Whether to display the play/pause button in the control bar.

Default: `true`

#### `seekBackwardButton`

[](#seekbackwardbutton)

Whether to display the button for seeking backward.

Default: `true`

#### `seekForwardButton`

[](#seekforwardbutton)

Whether to display the button for seeking forward.

Default: `true`

#### `muteButton`

[](#mutebutton)

Whether to display the mute/unmute button. Only available for video blocks.

Default: `true`

#### `volumeRange`

[](#volumerange)

Whether to show the volume slider. Only available for video blocks.

Default: `true`

#### `timeDisplay`

[](#timedisplay)

Whether to show the current time and duration of the media.

Default: `true`

#### `timeRange`

[](#timerange)

Whether to display the timeline or progress bar.

Default: `true`

#### `playbackRateButton`

[](#playbackratebutton)

Whether to include a control for adjusting playback speed. Only available for video blocks.

Default: `true`

#### `fullscreenButton`

[](#fullscreenbutton)

Whether to display the fullscreen toggle button. Only available for video blocks.

Default: `true`

#### `airplayButton`

[](#airplaybutton)

Whether to display the AirPlay button (only supported in Safari). Only available for video blocks.

Default: `false`

Spotify
-------

[](#spotify)

**Spotify support is disabled by default.**To enable it, add the following:

PHP (`functions.php` or a custom plugin)

```
add_filter( 'media_chrome_providers_audio', function ( $providers ) {
    $providers[] = S3S\WP\MediaChrome\Provider\Spotify::class;
    return $providers;
});
```

JavaScript (theme JavaScript file or a custom plugin)

```
addFilter('mediaChrome.providers.audio', 'my-plugin/enable-spotify', (providers) => {
  return [...providers, 'spotify'];
});
```

Styling
-------

[](#styling)

Media Chrome components can be fully styled with CSS to match your site's design. For complete styling documentation, see the [Media Chrome styling documentation](https://www.media-chrome.org/docs/en/styling).

Example of basic styling customization:

```
/* Change the color of the media controls */
media-control-bar {
  --media-control-background: rgba(0, 0, 0, 0.7);
  --media-control-hover-background: rgba(0, 0, 0, 0.9);
}

/* Style the play button */
media-play-button {
  --media-button-icon-width: 24px;
  --media-button-icon-height: 24px;
  --media-button-icon-transform: scale(1.2);
}
```

Hooks
-----

[](#hooks)

### PHP Filters

[](#php-filters)

#### `media_chrome_providers_video`

[](#media_chrome_providers_video)

Filters the list of enabled video providers. Receives an array of provider class names.

Default providers: `Vimeo`, `Wistia`, `YouTube`.

```
add_filter( 'media_chrome_providers_video', function ( $providers ) {
    return array_filter( $providers, fn( $p ) => $p !== \S3S\WP\MediaChrome\Provider\Wistia::class );
});
```

#### `media_chrome_providers_audio`

[](#media_chrome_providers_audio)

Filters the list of enabled audio providers. Empty by default.

```
add_filter( 'media_chrome_providers_audio', function ( $providers ) {
    $providers[] = \S3S\WP\MediaChrome\Provider\Spotify::class;
    return $providers;
});
```

#### `media_chrome_controller_attributes`

[](#media_chrome_controller_attributes)

Filters the `` element HTML attributes.

**Parameters:**

- `$attributes` *(array)* — HTML attributes.
- `$block_attrs` *(array)* — Block attributes.
- `$custom_settings` *(array)* — Merged custom settings.

#### `media_chrome_poster_image_attributes`

[](#media_chrome_poster_image_attributes)

Filters the `` element HTML attributes.

**Parameters:**

- `$attributes` *(array)* — HTML attributes.
- `$block_attrs` *(array)* — Block attributes.
- `$custom_settings` *(array)* — Merged custom settings.

#### `media_chrome_control_bar_components`

[](#media_chrome_control_bar_components)

Filters the components displayed in the media control bar.

**Parameters:**

- `$components` *(array)* — Array of component configurations keyed by tag name.

#### `media_chrome_control_bar_{$component}_slots`

[](#media_chrome_control_bar_component_slots)

Filters the slots for a specific control bar component. The `{$component}` placeholder uses underscores instead of hyphens (e.g., `media_chrome_control_bar_media_play_button_slots`).

**Parameters:**

- `$slots` *(array)* — Array of slot content keyed by slot name.
- `$block_attrs` *(array)* — Block attributes.

```
add_filter( 'media_chrome_control_bar_media_play_button_slots', function ( $slots, $block_attrs ) {
    $slots['icon'] = '...';
    return $slots;
}, 10, 2 );
```

#### `media_chrome_allowed_tags`

[](#media_chrome_allowed_tags)

Filters the allowed HTML tags and attributes for control bar slot content (passed to `wp_kses`).

**Parameters:**

- `$allowed_tags` *(array)* — Array of allowed tags and their attributes.

#### `media_chrome_{$slug}_provider_attributes`

[](#media_chrome_slug_provider_attributes)

Filters the HTML attributes for a specific provider element. Replace `{$slug}` with the provider slug (e.g., `youtube`, `vimeo`, `wistia`, `spotify`).

**Parameters:**

- `$attributes` *(array)* — HTML attributes.
- `$slug` *(string)* — Provider slug.

```
add_filter( 'media_chrome_youtube_provider_attributes', function ( $attributes, $slug ) {
    $attributes['crossorigin'] = 'anonymous';
    return $attributes;
}, 10, 2 );
```

### JavaScript Filters

[](#javascript-filters)

#### `mediaChrome.providers.video`

[](#mediachromeprovidersvideo)

Filters the list of supported video provider slugs in the block editor.

Default: `['youtube', 'vimeo', 'wistia']`

#### `mediaChrome.providers.audio`

[](#mediachromeprovidersaudio)

Filters the list of supported audio provider slugs in the block editor.

Default: `[]`

Changelog
---------

[](#changelog)

A complete listing of all notable changes to this project are documented in [CHANGELOG.md](https://github.com/s3rgiosan/wp-media-chrome/blob/main/CHANGELOG.md).

License and Attribution
-----------------------

[](#license-and-attribution)

This plugin is licensed under MIT.

This project incorporates [Media Chrome](https://www.media-chrome.org/), which is licensed under the [MIT License](https://github.com/muxinc/media-chrome/blob/main/LICENSE).

###  Health Score

44

—

FairBetter than 90% of packages

Maintenance92

Actively maintained with recent releases

Popularity17

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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

Every ~71 days

Recently: every ~66 days

Total

7

Last Release

57d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/42eed63db46bd6dc4df88e37095ad4f8aeacfcc63f68e7e11c637eb9ec18a652?d=identicon)[s3rgiosan](/maintainers/s3rgiosan)

---

Top Contributors

[![s3rgiosan](https://avatars.githubusercontent.com/u/499982?v=4)](https://github.com/s3rgiosan "s3rgiosan (70 commits)")

---

Tags

block-editorgutenbergmedia-chromewordpresswordpress-plugin

### Embed Badge

![Health badge](/badges/s3rgiosan-wp-media-chrome/health.svg)

```
[![Health](https://phpackages.com/badges/s3rgiosan-wp-media-chrome/health.svg)](https://phpackages.com/packages/s3rgiosan-wp-media-chrome)
```

###  Alternatives

[phpro/grumphp

A composer plugin that enables source code quality checks.

4.3k16.7M1.0k](/packages/phpro-grumphp)[symfony/runtime

Enables decoupling PHP applications from global state

74798.8M1.0k](/packages/symfony-runtime)[drupal/core-composer-scaffold

A flexible Composer project scaffold builder.

5445.2M564](/packages/drupal-core-composer-scaffold)[drupal/core-project-message

Adds a message after Composer installation.

2124.7M203](/packages/drupal-core-project-message)[oro/platform

Business Application Platform (BAP)

645143.5k115](/packages/oro-platform)[sandersander/composer-link

Adds ability to link local packages for development with composer

98457.9k](/packages/sandersander-composer-link)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)