jin2004-cmd Video Portfolio Performance
Use this skill when a portfolio site contains multiple videos or needs a visual redesign without sacrificing playback quality.
Inspect
- Identify the real repository and preserve its public URL.
- Inventory media dimensions, codecs, duration, and file size.
- Separate landscape, portrait, and square media.
- Identify template-only or third-party work.
- Capture desktop and mobile baselines.
Media
- Provide a poster for every video.
- Use
preload="none"below the fold. - Do not autoplay multiple videos.
- Defer media outside the first viewport.
- Use
containwhen the full frame matters andcoveronly for intentional crops. - Give each media surface a stable aspect ratio.
- Prefer web-friendly H.264/AAC versions with bounded file size.
Design and validation
Make the work the first-viewport signal. Use one clear visual direction, restrained interaction, visible focus, touch support, and reduced-motion handling. Validate desktop/mobile framing, network cost, controls, poster fallbacks, navigation, broken paths, overlap, and console errors. Report limitations honestly.