mux:video Antlers Tag

Render a video player using the <mux-video> web component, which can be used as a direct drop-in for the html video element. A thumbnail image of the video will be generated automatically and used as video poster.

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

Output

<mux-video
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  poster="https://image.mux.com/85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc/thumbnail.jpg"
  width="1920"
  height="1080"
></mux-video>

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:video src="assets::video.mp4" script="true" }}

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

Usage as background video

Setting the background attribute acts as a shortcut for rendering a muted video in looping autoplay to allow using the video as a background element:

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

<mux-video
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  autoplay loop muted
></mux-video>

Custom attributes

Any other attributes will be passed along to the the web component itself:

{{ mux:video src="assets::video.mp4" class="mt-3" }}

<mux-video
  playback-id="85g23gYz7NmQu02YsY81ihuod6cZMxCp017ZrfglyLCKc"
  class="mt-3"
></mux-video>

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>