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" autoplay loop muted class="mt-3" }}

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