reading time
6 min
Statamic addon

Statamic is a fantastic CMS with a wonderful community. It’s super developer-friendly and easily extendable with addons. If you’re reading this, you probably already appreciate Statamic. However, when it comes to integrating video, the options are limited to either using YouTube or linking directly to an MP4 file. Interestingly, even Statamic’s own site includes a rick-roll when showcasing their video capabilities.


So, what do you do if you’re a content creator who takes video seriously and wants to offer a great video experience without creating your own addon? We’ve got you covered with the Statamic addon. This addon allows you to seamlessly integrate your mave account with Statamic, upload videos directly within the control panel, and use mave player on your site.

The solution

If you’re more interested in the end result, feel free to skip to the conclusion of this article. But if you’re curious about how it’s built, let’s dive in.

The addon itself isn’t particularly complex, there are just two requirements:

If you’re not familiar with JWT, don’t worry. JWT (JSON Web Token) is a simple web standard for securely transmitting information between two parties as a JSON object. It ensures data integrity by signing it with a secret key, making sure the information hasn’t been tampered with.

In our case, we sign it with the API key generated in your mave account, which you can find here. The only time you need to generate a JWT is for uploading, to prevent unauthorized uploads, and for rendering a list, to secure access to your mave account. Both <mave-upload> and <mave-list> are components used in the Statamic addon.

Let’s start with integrating the <mave-upload> element and generating the token attribute (the JWT). Depending on where you want the user to upload, you set the sub attribute within the JSON object. It could be the root of your space (using the space ID as sub), inside a collection (using the collection ID as sub), or for a specific video embed (using the embed ID as sub, which will also allow replacement on re-upload). You should also set an exp attribute, which specifies the token’s expiration time as a Unix timestamp. This ensures that if someone malicious obtains the token, it will become invalid after the set time.

Using your preferred library, you can generate a JWT with the payload:

  "sub": "XD9HPRtkDDmENLeVy9ripU", // space, collection or embed can be specified
  "exp": 1704112620 // until when the user can upload

Then sign this payload with your API key. Provide this token to the frontend (in our case, Statamic) and apply it as the token attribute on the upload element (or list component):

<mave-upload token="eyJxxx"></mave-upload>

The result

With some JavaScript magic, you can create a modal that switches between a collection (already uploaded items) and the upload component. The result is:


To install, you simply run the following command in your project root:

composer require maveio/statamic-mave

Add the following to your .env file: the mave API key, the space, collection, or embed ID as MAVE_SUB, and optionally a theme:


As as the final step add this to your Antlers template:

<mave-player embed="{{ mave_field }}"></mave-player>

The addon we’ve created is open-source and can be found on Github.

maveio/mave-statamic on GitHub


Congratulations on getting this far! To celebrate your integration of mave into your Statamic website, we’d like to offer you a 50% discount on your first three months. Just use the code STATAMIC50 when choosing a plan once you’ve signed up (coupon valid until the end of July). We hope you enjoy the addon, and if you have any questions, please don’t hesitate to reach out to us.

Happy coding!

Published on June 13, 2024
works with
Our docs guide you through the process of embedding video, starting with simple steps for novices and advancing to manual configurations for experienced users. It outlines multiple hosting alternatives, including a default CDN, and highlights compatibility with popular web frameworks.
🍪 Press 'Accept' to confirm that you accept we don't use cookies. Yes, this banner is just for show!