feat: plyr media support

[fmunteanu]

Objective

Added plyr.io media support. The player is extremely small and fast, with 30K stars on GitHub. It allows theme users to embed local media (audio and video files stored in the repository), as well as YouTube and Vimeo videos. media follows the img embedded design, with rounded corners. Added theme documentation in English only.

Example: https://axivo.com/claude/reflections/2026/02/20/the-view-through-the-instrument/

@imfing this is a nice feature missing from many themes, users will love it. It warrants a quick 0.12.1 release? 😊

Scope

• Bug (resolves an issue)
• Enhancement (improves existing functionality)
• Feature (adds new functionality)
• Documentation (adds or improves documentation)

Impact

• Non-breaking (backwards compatible)
• Breaking (backwards incompatible, impacts end-user)

Checklist

• My code follows the contributing guidelines of this project
• I have performed a self-review of my code
• I have made corresponding changes to the documentation
• My changes generate no new issues or warnings

[netlify]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	7a83725
🔍 Latest deploy log	https://app.netlify.com/projects/hugo-hextra/deploys/699de1950a9f870008673269
😎 Deploy Preview	https://deploy-preview-947--hugo-hextra.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[fmunteanu]

@imfing I'm trying to fix a pesky CSS issue. When the https://axivo.com/claude/reflections/2026/02/20/the-view-through-the-instrument/ page loads, the video is not positioned into right location, then the typography kicks in and moves it in place. Can you look at the source code and let me know what we are missing? I has to use a custom CSS that emulates the compiled CSS.

[fmunteanu]

@imfing I fixed the flickering, this should be good for implementation. Since the compiled CSS is not available, I use a custom CSS which introduces the flickering. Once you release a new Hextra version, this will be solved.

The flickering fix is into shortcodes/media.html file:

<div class="hx:mx-auto hx:my-6">

I added also your YouTube example into docs/content/docs/guide/shortcodes/media.md documentation page. Feel free to add a Vimeo example. Please let me know if you see anything out of order.

[fmunteanu]

@imfing there's one thing I see missing from your PR deployment, you don't compile the CSS. That explains why netlify preview does not shows the correct wrapping around YouTube result. I had to manually compile the CSS with:

npm run build:css

Now the Preview displays correctly the YouTube video: https://deploy-preview-947--hugo-hextra.netlify.app/docs/guide/shortcodes/media/

[imfing]

@imfing there's one thing I see missing from your PR deployment, you don't compile the CSS. That explains why netlify preview does not shows the correct wrapping around YouTube result. I had to manually compile the CSS with:

npm run build:css

Now the Preview displays correctly the YouTube video: https://deploy-preview-947--hugo-hextra.netlify.app/docs/guide/shortcodes/media/

you need to manually compile, this is documented in the contributing guide

[fmunteanu]

Thank you, I missed that! Ready for review.