jekyll-mux
A Jekyll plugin that provides a {% mux %} Liquid tag for embedding Mux-hosted videos with a responsive iframe wrapper.
jekyll-mux is a Jekyll plugin that makes embedding Mux-hosted videos as simple as one tag. It outputs a clean, responsive iframe wrapper using the official Mux Player embed URL.
Demo
{% mux 61zK4LlhV9P00tpGpsH7Fc00T58eR7m63b accent-color=#0066ff metadata-video-title="jekyll-mux demo" %}
Why This Exists
Mux is a best-in-class video infrastructure platform. If you’re using Mux for video and Jekyll for your site, you shouldn’t have to write raw iframe HTML every time you want to embed a video. This plugin gives you a clean Liquid tag that handles the wrapper and passes through any Mux Player embed parameters.
Source Code
- GitHub: github.com/jchance/jekyll-mux
- RubyGems: rubygems.org/gems/jekyll-mux
Installation
Add to your Gemfile:
gem "jekyll-mux", "~> 0.1"
Add to _config.yml:
plugins:
- jekyll-mux
Then run bundle install.
Usage
Basic embed:
{% mux YOUR_PLAYBACK_ID %}
With parameters:
{% mux YOUR_PLAYBACK_ID accent-color=#ff0000 autoplay=false loop=false %}
{% mux YOUR_PLAYBACK_ID metadata-video-title="My Video" metadata-viewer-user-id=user-123 %}
Your playback ID is the alphanumeric string from your Mux dashboard or the part after https://player.mux.com/ in an embed URL.
Supported Parameters
| Parameter | Description |
|---|---|
accent-color |
Player accent color (CSS color value) |
autoplay |
Autoplay on load |
loop |
Loop playback |
muted |
Start muted |
playsinline |
Inline playback on mobile |
preload |
auto, metadata, or none |
stream-type |
on-demand or live |
start-time |
Start position in seconds |
metadata-video-title |
Video title for Mux Data analytics |
metadata-video-id |
Custom video ID for Mux Data |
metadata-viewer-user-id |
Viewer ID for Mux Data |
metadata-player-name |
Player name for Mux Data |
Styling
The plugin outputs a wrapper div with the class mux-embed. No spacing is applied by default. Add your own in your site CSS:
.mux-embed {
margin-bottom: 2rem;
}
