jekyll-mux 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4c92af4f41242241a305d73ebe260383750428cae16c6278c30a37fd6e2c7f92
+  data.tar.gz: fa63bcade901f7801cc2851d2086e945c5aa2f3c868f0546106db7e60a33f614
+SHA512:
+  metadata.gz: 7cf44c1b07b7fbfa547fcbe37eca93729447a7d9aec253a866c9297c78bf60f6ae2e2161ea412e5d69c763d8620d40d244c2e4029699230b4adb0dad717def15
+  data.tar.gz: a7cbc132bbe2d1ce15e06247f7ee086bb2f734206c31bc09f8bb1b42a581b34d5ff38a1ea4435a156cd3e26bea227152558e020c911be0fdd124012864bc8eab

data/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## [0.1.0] - 2026-08-20
+
+### Added
+- Initial release
+- `{% mux PLAYBACK_ID %}` Liquid tag for embedding Mux-hosted videos
+- Responsive 16:9 iframe wrapper with class `mux-embed`
+- Support for Mux Player embed parameters: `accent-color`, `autoplay`, `loop`, `muted`, `playsinline`, `preload`, `metadata-*`, `stream-type`, `start-time`

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jason Chance
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,96 @@
+# jekyll-mux
+
+A Jekyll plugin that provides a `{% mux %}` Liquid tag for embedding [Mux](https://mux.com)-hosted videos with a responsive iframe wrapper.
+
+## Installation
+
+Add to your `Gemfile`:
+
+```ruby
+gem "jekyll-mux", "~> 0.1"
+```
+
+Add to your `_config.yml`:
+
+```yaml
+plugins:
+  - jekyll-mux
+```
+
+Then run:
+
+```
+bundle install
+```
+
+## Usage
+
+```liquid
+{% mux YOUR_PLAYBACK_ID %}
+```
+
+With optional parameters:
+
+```liquid
+{% mux YOUR_PLAYBACK_ID accent-color=#ff0000 autoplay=false loop=false muted=false %}
+```
+
+With metadata for Mux Data analytics:
+
+```liquid
+{% mux YOUR_PLAYBACK_ID metadata-video-title="My Video" metadata-viewer-user-id=user-123 %}
+```
+
+The tag outputs a responsive 16:9 iframe wrapper:
+
+```html
+<div class="mux-embed" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
+  <iframe
+    src="https://player.mux.com/YOUR_PLAYBACK_ID"
+    frameborder="0"
+    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
+    allowfullscreen
+    style="position:absolute;top:0;left:0;width:100%;height:100%;"
+    loading="lazy">
+  </iframe>
+</div>
+```
+
+## Finding Your Playback ID
+
+Your Mux playback ID is the alphanumeric string in your Mux dashboard video URL or from the Mux API. It's the value that goes after `https://player.mux.com/` in an embed URL.
+
+## Supported Parameters
+
+| Parameter | Values | Description |
+|---|---|---|
+| `accent-color` | CSS color value | Player accent color (default: Mux pink `#fa50b5`) |
+| `autoplay` | `true`, `false` | Autoplay the video on load |
+| `loop` | `true`, `false` | Loop playback |
+| `muted` | `true`, `false` | Start muted |
+| `playsinline` | `true`, `false` | Play inline on mobile (no forced fullscreen) |
+| `preload` | `auto`, `metadata`, `none` | Preload behavior |
+| `stream-type` | `on-demand`, `live` | Video stream type |
+| `start-time` | number (seconds) | Start playback at this time |
+| `metadata-video-id` | string | Custom video ID for Mux Data |
+| `metadata-video-title` | string | Video title for Mux Data |
+| `metadata-viewer-user-id` | string | Viewer ID for Mux Data |
+| `metadata-player-name` | string | Player name for Mux Data |
+| `metadata-page-type` | string | Page type for Mux Data |
+| `metadata-sub-property-id` | string | Sub-property ID for Mux Data |
+
+Parameters with spaces in values should be quoted: `metadata-video-title="My Great Video"`.
+
+## Styling
+
+The plugin outputs an unstyled `.mux-embed` wrapper div. Add bottom margin or other spacing in your site's CSS:
+
+```css
+.mux-embed {
+  margin-bottom: 2rem;
+}
+```
+
+## License
+
+MIT — see [LICENSE.txt](LICENSE.txt).

data/lib/jekyll/mux_tag.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "liquid"
+
+module Jekyll
+  class MuxTag < Liquid::Tag
+    EMBED_BASE = "https://player.mux.com/"
+
+    # Supported query parameters for the Mux iframe embed player.
+    # These mirror the Mux Player web component attributes as URL query params.
+    VALID_PARAMS = %w[
+      accent-color autoplay loop muted playsinline preload
+      metadata-video-id metadata-video-title metadata-viewer-user-id
+      metadata-player-name metadata-page-type metadata-sub-property-id
+      stream-type start-time
+    ].freeze
+
+    def initialize(tag_name, markup, tokens)
+      super
+      parts = markup.strip.split(/\s+/, 2)
+      @playback_id = parts[0]
+      @params = parse_params(parts[1] || "")
+    end
+
+    def render(_context)
+      raise "Mux tag requires a playback ID" if @playback_id.nil? || @playback_id.strip.empty?
+
+      src = EMBED_BASE + @playback_id
+      unless @params.empty?
+        src += "?" + @params.map { |k, v| "#{CGI.escape(k)}=#{CGI.escape(v.to_s)}" }.join("&")
+      end
+
+      <<~HTML.strip
+        <div class="mux-embed" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
+          <iframe
+            src="#{src}"
+            frameborder="0"
+            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
+            allowfullscreen
+            style="position:absolute;top:0;left:0;width:100%;height:100%;"
+            loading="lazy">
+          </iframe>
+        </div>
+      HTML
+    end
+
+    private
+
+    def parse_params(raw)
+      params = {}
+      raw.scan(/(\S+?)=(?:"([^"]*?)"|'([^']*?)'|(\S+))/) do |key, dq, sq, bare|
+        value = dq || sq || bare
+        if VALID_PARAMS.include?(key)
+          params[key] = value
+        else
+          warn "jekyll-mux: Unknown param '#{key}' ignored"
+        end
+      end
+      params
+    end
+  end
+end
+
+Liquid::Template.register_tag("mux", Jekyll::MuxTag)

data/lib/jekyll-mux.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "jekyll/mux_tag"

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-mux
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jason Chance
+bindir: bin
+cert_chain: []
+date: 2026-08-20 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+description: jekyll-mux provides a simple {% mux PLAYBACK_ID %} Liquid tag for embedding
+  Mux-hosted videos with a responsive iframe wrapper and support for Mux Player embed
+  parameters.
+email:
+- jason@jasonchance.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- lib/jekyll-mux.rb
+- lib/jekyll/mux_tag.rb
+homepage: https://jasonchance.com/projects/jekyll-mux/
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://jasonchance.com/projects/jekyll-mux/
+  source_code_uri: https://github.com/jchance/jekyll-mux
+  bug_tracker_uri: https://github.com/jchance/jekyll-mux/issues
+  changelog_uri: https://github.com/jchance/jekyll-mux/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: A Jekyll plugin that provides a {% mux %} Liquid tag for embedding Mux-hosted
+  videos.
+test_files: []