mux:player Antlers Tag

Render a custom video player using the <mux-player> web component, which is a highly customizable, themable player for streaming Mux videos. Refer to the official Mux Player docs for details on customizing the player.

{{ mux:player src="assets::video.mp4" }}

Output

<mux-player
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  width="1920"
  height="1080"
></mux-player>

Including the required scripts

Normally you'd need to load the required web component scripts from a CDN or bundle them on your own. Setting the tag's script attribute will render the required script tag for you, along with the video itself:

{{ mux:player src="assets::video.mp4" script="true" }}

<mux-player playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"></mux-player>
<script async src="https://unpkg.com/@mux/mux-player@3"></script>

Custom attributes

Any other attributes will be passed along to the the web component itself to allow for customization. Learn more about customizing the look and feel of Mux Player.

{{ mux:player src="assets::video.mp4" primary-color="#075389" start-time="10" }}

<mux-player
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  primary-color="#075389"
  start-time="10"
></mux-player>

Customizing the view

If you need to adjust the rendered html beyond what's possible with the standard parameters, you can publish the addon's views and make them your own. To do that, run the following command in your console. You'll then find the views in resources/views/vendor/statamic-mux/.

php artisan vendor:publish --tag=statamic-mux-views

Disabling tracking

To disable any tracking and allow playback without asking for explicit consent, you'll need to disable cookies and tracking via two separate parameters. With those set, usage of Mux should be GDPR-compliant in most cases.

<mux-video
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  disable-tracking
  disable-cookies
></mux-video>