skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-video

Detect responsive layout and usability defects in HTML video elements and embedded players.

Updated May 22, 2026
Search Tags:#layout#responsive design#qa#video#youtube#iframe#vimeo
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-video
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-video
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-video
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-video

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps catch video elements and embedded players that break on smaller screens, overflow their containers, or fail to provide usable playback controls.

Core Features & Use Cases

  • Responsive video checks: Detects oversized <video> elements that lack fluid sizing and may clip or overflow on mobile.
  • Embed validation: Finds YouTube, Vimeo, and similar iframe embeds that need responsive wrappers or fixed-size overrides.
  • Playback usability: Flags videos without native controls or an obvious custom play button, helping ensure users can actually interact with the media.
  • Use case: A QA agent can scan a page with product demos, tutorials, or marketing embeds and report layout and usability defects before release.

Quick Start

Ask the agent to inspect the current page for non-responsive videos and video embeds that overflow, lack controls, or need responsive iframe wrappers.

Frequently Asked Questions about qa-detect-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect responsive layout defects in YouTube and Vimeo iframe embeds?▼

To detect responsive layout defects in iframe embeds, scan web pages for YouTube and Vimeo players lacking fluid sizing or responsive wrappers. This identifies fixed iframe dimensions that cause container overflow on mobile viewports.

Why do my HTML video elements overflow their containers on mobile screens?▼

HTML video elements overflow containers on mobile when they lack fluid sizing. Scanning for oversized video tags without responsive width attributes flags playback elements that clip or break layout on viewport-sensitive browser tests.

Can I automate QA checks for missing playback controls on embedded video players?▼

You can automate QA checks for missing playback controls by scanning pages for video elements lacking native controls or custom play buttons. This playback usability audit flags media users cannot interact with.

Does video embed validation work for Wistia, Loom, and Dailymotion players?▼

Video embed validation works for Wistia, Loom, and Dailymotion players across viewport-sensitive browser tests. The QA audit detects iframe embeds requiring responsive wrappers or fixed-size overrides for these platforms.

What is the best way to find non-responsive video embeds before a website release?▼

The best way to find non-responsive video embeds before release is running an automated QA agent scan. This flags product demos and marketing embeds with container overflow, missing native controls, or fixed iframe dimensions.

When should I not rely on automated iframe wrapper detection for responsive design?▼

Automated iframe wrapper detection for responsive design has limitations when custom video players use dynamic JavaScript rendering. It works best for static HTML video elements and standard embeds across viewport-sensitive browser tests.

Related Skills

Explore More Software Engineering Skills→
valithedgevalithedge

find-test-content

Locate pages containing a specified content block by class and report instance counts and variants.

Community
Intermediate
WanxiaJaneYangWanxiaJaneYang

css-layout-helper

Diagnose CSS layout issues and propose fixes with Flexbox or Grid.

Community
Basic
Impertio-StudioImpertio-Studio

tailwind-syntax-responsive

Adjust responsive layouts using Tailwind CSS viewport breakpoints and container queries.

Official
Intermediate
cmbayscmbays
1

mobile-first-design

Enforce mobile-first design with responsive breakpoints and touch target standards.

Community
Intermediate