Caption Style Customiser

WHAT IT DOES

Caption Style Customiser is a browser extension that allows you to customize the appearance of video captions and subtitles on supported video players. You can set the font family, font size, text color, background color, and opacity for captions. The tool applies CSS overrides to video caption tracks and provides a live preview of your settings. A text shadow option improves readability by adding a shadow behind the text. The tool is ideal for users with visual impairments, reading difficulties, or anyone who prefers custom-styled captions for better readability and comfort.

WHERE IT RUNS

Caption Style Customiser runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override caption styles. It works on any page with video players that support captions or subtitles, including YouTube, Vimeo, and other HTML5 video players. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the custom styles. Select a font family from the dropdown (Arial, Helvetica Neue, Georgia, Times New Roman, Courier New, Verdana, Trebuchet MS, Tahoma, Open Sans, Roboto). Use the "Size" slider to adjust font size from 8px to 60px. Use the color pickers to set text color and background color. Use the "Opacity" slider to adjust the background opacity from 0% to 100%. Toggle "Text shadow for readability" to enable or disable a text shadow effect. The live preview shows how your settings will appear on actual captions. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most video players have limited caption styling options or use default styles that may not be accessible to all users. Caption Style Customiser uses a CSS injection approach that targets caption elements across different video platforms. The tool injects a style element with high-specificity CSS rules targeting ::cue (WebVTT caption tracks), YouTube caption elements (.ytp-caption-segment), Vimeo captions (.vimeo-captions-text), and generic caption containers. The rules use !important to override the player's default styles. The tool supports font-family, font-size, color, background-color (with opacity via rgba), and text-shadow. The background color is applied using rgba with the user's selected opacity, creating a semi-transparent background that improves readability without obscuring the video. The live preview uses the same CSS properties as the actual captions, giving users a real-time preview of their settings. This approach ensures comprehensive, consistent, and fully private caption customization without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls and the preview. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and all style settings—are saved per domain for a seamless experience.

PLEASE NOTE

Caption Style Customiser requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies CSS overrides to caption elements and may not work on all video players or caption formats. The tool is designed for HTML5 video players with native caption support. The background color and opacity apply to the caption background, not the video background. The text shadow option adds a shadow for improved contrast. All settings are stored locally in your browser using GM_setValue. No video data, caption content, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.