Skills
.Work. You
Rest

responsive-video-source-selection

Community

Cross-browser responsive video selection

Software Engineering#html#javascript#media queries#video#responsive#cross-browser
Authorhubeiqiao
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the unreliability of the <source media="..."> attribute within HTML <video> tags across major browsers like Chrome and Firefox, ensuring the correct video source is loaded based on viewport size.

Core Features & Use Cases

  • Cross-Browser Compatibility: Provides a JavaScript workaround for the inconsistent implementation of the media attribute in <video> sources.
  • Responsive Video Loading: Ensures mobile-optimized or desktop-optimized video files are selected and loaded appropriately.
  • Use Case: When building a video player that needs to serve different video files for portrait (mobile) and landscape (desktop) orientations, and you observe the wrong video playing on certain browsers.

Quick Start

Use the responsive-video-source-selection skill to ensure the correct video source is loaded for the current viewport size.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: responsive-video-source-selection
Download link: https://github.com/hubeiqiao/skills/archive/main.zip#responsive-video-source-selection

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.