Skip to content

Instantly share code, notes, and snippets.

@jghankins
Created April 14, 2026 17:10
Show Gist options
  • Select an option

  • Save jghankins/39841f4be0df9a21d2e053993964b1fb to your computer and use it in GitHub Desktop.

Select an option

Save jghankins/39841f4be0df9a21d2e053993964b1fb to your computer and use it in GitHub Desktop.
Video Fallback & Direct URL Support - Feature Spec

Video Fallback & Direct URL Support

Problem

A Vimeo outage impacted a high-volume course. The lesson player currently only supports Vimeo and YouTube via iframe embeds, leaving no recourse when a provider goes down.

Solution

Two complementary features:

1. Fallback Video URL

Each lesson gets an optional backup video URL (video_fallback_url). When configured, a "Having trouble viewing? Try backup player" link appears below the video player. Clicking it swaps to the fallback source.

Why manual toggle instead of auto-detect?

  • iframe load failure detection is unreliable across browsers (cross-origin restrictions)
  • A visible link is simple, predictable, and works 100% of the time
  • The link only appears when a fallback URL is configured -- no UI clutter otherwise

2. Direct Video URL Support

URLs ending in .mp4, .webm, .m3u8, or .ogg render in an HTML5 <video> tag instead of an iframe. This works for both primary and fallback URLs, so you can use a CDN-hosted MP4 (e.g. CloudFront) as either the main video or the backup.

Signed CDN URLs with query parameters (e.g. ?Policy=xxx&Signature=xxx) are handled correctly -- the URL path is parsed, not the full string.

Supported URL Types

URL Pattern Rendered As
https://vimeo.com/123456 <iframe> embed
https://youtube.com/watch?v=xxx <iframe> embed
https://cdn.example.com/video.mp4 <video> tag
https://cdn.example.com/video.webm <video> tag
https://cdn.example.com/stream.m3u8 <video> tag (HLS)
https://d123.cloudfront.net/v.mp4?Policy=xxx <video> tag (signed URL)

Changes

Area What Changes
Database New video_fallback_url column on lessons table
Schema Lesson schema + changeset updated
Student Player Renders <video> for direct URLs, <iframe> for embeds. Shows fallback toggle when configured
Admin Builder New fallback URL input field. Video preview hook updated to recognize direct URLs
API video_fallback_url added to all lesson serializers (6 controllers)
Import Course import worker passes through video_fallback_url

Usage

As an admin

  1. Edit a lesson in the course builder
  2. Set the primary Video URL (Vimeo, YouTube, or a direct MP4/WebM link)
  3. Optionally set the Fallback Video URL (e.g. a CloudFront MP4 backup)

As a student

  • Video plays from the primary URL by default
  • If the primary is down, click "Having trouble viewing? Try backup player" to switch to the fallback
  • Direct MP4/WebM/HLS links play natively in the browser -- no third-party player dependency

Example Configuration

Primary:  https://vimeo.com/123456789
Fallback: https://d1abc2def3.cloudfront.net/courses/lesson-1.mp4

If Vimeo goes down, students click the fallback link and get the CloudFront MP4 via the native browser player.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment