web-embed-video-optimization

Transcode and embed existing video files as fast-autoplaying web hero or background loops.

3|1|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/ever-just/agentskills --skill web-embed-video-optimization-ever-just
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-embed-video-optimization
Source: https://github.com/ever-just/agentskills/tree/main/skills/web-embed-video-optimization
Command: npx skills add https://github.com/ever-just/agentskills --skill web-embed-video-optimization-ever-just

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Website hero and background videos often fail in practice: they are too heavy, refuse to autoplay on mobile or Safari, throw codec errors, or look blurry on retina displays. This Skill provides a proven ffmpeg-based recipe to fix all of these issues when embedding footage you already have. ## Core Features & Use Cases - Probing and diagnosis: Inspect codec, pixel format, resolution, frame rate, audio streams, and moov atom placement with ffprobe before transcoding. - Web-safe transcoding: Convert source clips to H.264 with yuv420p pixel format, faststart, retina-aware scaling, and CRF-based compression, typically shrinking a 1080p screen recording from ~8 MB to ~1.5 MB. - Poster frames and embed markup: Extract a representative poster image and generate the muted/playsinline/autoplay HTML required for mobile playback, plus Odoo attachment serving guidance. - Use Case: A marketing site's homepage hero video will not autoplay on iPhones and weighs 8 MB. Use this Skill to re-encode it to a 1600px-wide faststart H.264 file, generate a poster frame, embed it with the correct video attributes, and verify playback via Chrome DevTools Protocol. ## Quick Start Optimize the attached video file for use as an autoplaying hero loop on my website and give me the embed code.

Frequently Asked Questions about web-embed-video-optimization

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

FAQPage Schema
How do I make a video autoplay on mobile Safari?▼

Mobile autoplay requires the muted, playsinline, and autoplay attributes together on the video element. The file must also use H.264 with yuv420p pixel format, since yuv444 or yuv422 encodes will not play in Safari.

How to compress a video for a website hero with ffmpeg?▼

Use ffmpeg with libx264, CRF 23, preset slow, and scale to roughly twice the CSS display width, such as scale=1600:-2. Add -movflags +faststart and strip audio with -an; this typically reduces a 1080p screen recording from about 8 MB to 1.5 MB.

Why won't my MP4 video play in Safari?▼

Safari fails on videos encoded with yuv444 or yuv422 pixel formats or unsupported codecs like HEVC in some contexts. Re-encode with -pix_fmt yuv420p and the H.264 high profile to restore broad browser compatibility.

What is faststart in ffmpeg and why does it matter?▼

Faststart moves the moov atom to the front of the MP4 file so playback can begin before the download completes. Without it, an autoplaying hero video stalls on slow connections while the browser waits for metadata at the file's end.

When should I not use this video optimization approach?▼

This workflow only optimizes and embeds footage you already have. For creating or animating video from scratch, use tools like Remotion, MoviePy, or Motion Canvas instead.