About Plyr Media Player

This module adds the Plyr HTML5 Media Player to ProcessWire.

Category 1Markup Generation
Markup modules that are called upon to generate or parse markup (like HTML). Markup modules are most often used on the front-end of a site (rather than admin).
Category 2Photo/Video/Audio
Modules that perform some function related to media such as photos and audio/video.
Release StateAlpha
Non-stable. Not yet intended for use in production environments. *
Module Version0.2.1
Class NameMarkupPlyrMediaPlayer
Compatibility2.6, 2.7
Date AddedSeptember 16, 2015
Last UpdatedSeptember 28, 2015
Recommended ByNew recommendations may take up to 1 day to appear.


This module adds the Plyr HTML5 Media Player to ProcessWire.


This module's files should be placed in /site/modules/MarkupPlyrMediaPlayer/
How to install or uninstall modules


Plyr Media Player for ProcessWire

! This module is "work in progress" v0.2 beta !

This module adds the Plyr HTML5 Media Player to ProcessWire.

Plyr is basically a wrapper for the natural media interface in modern browsers. It adds the ability for easy styling via CSS and a sprite, while being fully responsive. Also Plyr gives you full controll over the player with its great javascript interface.

MarkupPlyrMediaPlayer incorporates Plyr into the ProcessWire CMS.

Current capabilities

After installation, you will notice some module configuration options. These are:

  • Automatic Mode If enabled, this option will automaticaly add all needed resources into your pages output.
  • Use CDN Use the official Plyr CDN (Content Delivery Network) for resources?

The following resource options are only required if you don't wish to use the CDN:

  • Path to CSS file (Path to your CSS file, required to style the players.)
  • Path to Plyr library (Path to the Plyr javascript library, required for the functionality.)
  • Path to SVG sprite (Path to your SVG sprite image file, required to style the players.)

Automatic mode

If automatic mode is enabled, the module hooks after the page rendering and automatically adds the stylesheet to HTML head. Also adds an AJAX call to fetch the SVG sprite and the Plyr javascript library right before the ending body-tag. Also, while in automatic mode, that extra markup will only be rendered if a template made a render request for a Plyr player. So there will be no unnecessary load on your site.

Get module

$plyr = $modules->get("MarkupPlyrMediaPlayer");

Add a video player to your template

echo $plyr->renderVideoPlayer($poster, $mp4, $webm, $captions);

The $captions-Array contains details of the caption tracks:

$captions = $caption = array();

$caption['label']   # Something like "English captions"
$caption['src']     # http://...movie_captions_en.vtt
$caption['srclang'] # en|de|ru|...
$caption['default'] # true|false

array_push($captions, $caption);

Add an audio player to your template

echo $plyr->renderAudioPlayer($mp3Path, $oggPath); 

Add the YouTube-wrapper to your template

echo $plyr->renderYoutubePlayer($videoId); 

Manual mode

If automatic mode is disabled, you have to render these parts manualy in your page template. Important: This method will not check if a player was requested.

In the HTML head:

        <?php echo $plyr->renderHeadLink();  // Basicly just a <link rel="stylesheet" href="..."> ?>

And in the footer somewhere before the closing body-tag:

        echo $plyr->renderScripts(); // AJAX call for SVG and JS library inclusion

Where is this going?

Before getting a v1.0.0 stable release, this module should be capable of following features:

  • [done] Load resources from CDN or local files
  • Reliable automatic mode with fallback to local
  • Brings specific Inputfields for video, audio and youtube for the backend and frontend markup rendering
  • Every Plyr javascript setting can be handled via module configuration