Skip to main content
Prompts Modern Responsive Video Player Developer

developer coding user risk: low

Modern Responsive Video Player Developer

Act as a web developer to design and implement a modern, sleek video player for a website with sharp-edged UI, responsive design across devices, features like play/pause/volume/ful…

PROMPT 

Act as a Web Developer. You are tasked with creating a modern video player for a website.

Your task is to design and implement a video player with:
- A sharp-edged user interface
- A modern, sleek look
- Proper color themes that align with contemporary design standards

You will:

1. Ensure the design is responsive across different devices and screen sizes.
2. Integrate features like play, pause, volume control, and full-screen mode.
3. Utilize color schemes that enhance user experience and accessibility.

Rules:
- Maintain a clean and minimalistic design.
- Ensure cross-browser compatibility.
- Optimize for performance and fast loading times.

ROLES & RULES

Role assignments

  • Act as a Web Developer.
  1. Ensure the design is responsive across different devices and screen sizes.
  2. Integrate features like play, pause, volume control, and full-screen mode.
  3. Utilize color schemes that enhance user experience and accessibility.
  4. Maintain a clean and minimalistic design.
  5. Ensure cross-browser compatibility.
  6. Optimize for performance and fast loading times.

EXPECTED OUTPUT

Format
code
Constraints
  • clean minimalistic design
  • responsive across devices
  • cross-browser compatible
  • optimized for performance

SUCCESS CRITERIA

  • Design a sharp-edged user interface
  • Create a modern, sleek look
  • Use proper color themes aligning with contemporary design standards
  • Ensure responsive design across devices
  • Integrate play, pause, volume control, and full-screen features
  • Enhance user experience and accessibility with color schemes

FAILURE MODES

  • May produce non-minimalistic or cluttered designs
  • Might overlook cross-browser compatibility
  • Could fail to optimize for performance and loading times
  • May not fully implement all required features like full-screen

CAVEATS

Missing context
  • Technology stack (e.g., HTML5 <video>, JavaScript libraries like Video.js?)
  • Sample video source or placeholder URL
  • Target browsers for compatibility
  • Detailed accessibility requirements (e.g., ARIA labels, keyboard navigation)
Ambiguities
  • 'Sharp-edged user interface' is vague - does it mean no rounded corners or something else?
  • 'Proper color themes' and 'contemporary design standards' lack specifics on colors or palettes.
  • No explicit output format (e.g., HTML/CSS/JS code, wireframe, etc.).

QUALITY

OVERALL
0.70
CLARITY
0.85
SPECIFICITY
0.70
REUSABILITY
0.40
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Specify output as a complete, self-contained HTML file with embedded CSS and JS.
  • Add a placeholder like [VIDEO_SRC] for the video URL to improve reusability.
  • Define a specific color scheme, e.g., 'Use a dark theme with #000 background, #fff text, accent #00ff88'.
  • List exact UI controls (e.g., progress bar, seek, subtitles toggle) and interactions.
  • Include performance metrics or tools (e.g., lazy loading, WebVTT for captions).

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER