respinar / contao-plyr-bundle

1.3.0 2025-09-24 07:12 UTC

Requires

• php: ^8.3
• contao/core-bundle: ^5.3

Requires (Dev)

• contao/manager-plugin: ^2.12

MIT

• Hamid Peywasti

• bundle
• video
• contao
• plyr

Published on Packagist.org on 2026-07-16 07:15 UTC

README

A Contao 5 content element that plays local video and audio files with Plyr.

Requirements

• PHP 8.3+
• Contao 5.3+

Installation

composer require respinar/contao-plyr

If you use the Contao Manager, search for respinar/contao-plyr and install it from there.

Clear the application cache after installing:

vendor/bin/contao-console cache:clear

Usage

1. In the Contao back end, create a new content element of type Plyr Video/audio (category: Media).
2. Select one or more video or audio files under Source files.
3. Optionally configure:
   • Text tracks (WebVTT captions/subtitles)
   • Player options (autoplay, loop, muted, controls, …)
   • Player size, preload, start/stop time
   • Poster image (video only)
   • Caption

Multiple sources can be used for quality variants. Name files with a resolution suffix such as movie-720p.mp4 or movie-1080p.mp4 so the player can expose quality options via the HTML size attribute.

Frontend assets

The bundle ships Plyr CSS/JS under public/ and loads them once per page when a Plyr element is rendered:

• bundles/respinarcontaoplyr/plyr.css
• bundles/respinarcontaoplyr/plyr.min.js

Assets are registered through Contao’s Twig document collectors (stylesheets / body) so they are not duplicated for every element. Inline initialization is CSP-friendly (csp_nonce('script-src')).

To refresh the vendored Plyr build from npm:

npm install
# postinstall copies node_modules/plyr/dist/* into public/

Template customization

The default template is content_element/plyr.html.twig.

Media data is available as figure (Contao convention). A plyr alias points to the same object for backwards compatibility.

Players are initialized for every element with a data-plyr attribute:

document.querySelectorAll('[data-plyr]').forEach((el) => {
    el.plyr = new Plyr(el);
});

You can override CSS/JS paths in a custom template:

{% set plyr_css_file = asset('bundles/respinarcontaoplyr/plyr.css') %}

Development

composer install
composer test

License

MIT — see LICENSE.