Your watch page is the page your recipient lands on when they click your video. It’s the first impression they get of your brand — and a few minutes of customization makes it feel like your page, not a generic video player.
This article walks you through customizing the colors of your watch page so it matches your brand.
What you can customize #
From Settings → Watch Page Branding, you can set:
- Background color — The main background of the watch page.
- Primary button color — The fill color for primary action buttons (like your main CTA).
- Primary button text color — The text color on primary buttons (usually white or black depending on your button color).
- Secondary button color — The fill color for secondary buttons (like “Reply” or other links).
- Secondary button text color — Text color on secondary buttons.
- CTA button color — Specifically for your watch page Call-to-Action button.
- CTA button text color — Text color on the CTA button.
All seven properties update independently so you can fine-tune contrast and accessibility.
Step 1 — Pick your colors #
If you have a brand style guide, grab the hex codes for your primary brand color, accent color, and any background you use on your website.
If you don’t, here’s a quick rule of thumb:
- Background — usually white (
#FFFFFF) or a very light gray (#F8F9FA). Dark backgrounds look slick but can hurt video legibility. - Primary button — your strongest brand color. This is what people will click.
- CTA button — the same color as your primary button, or a higher-contrast accent color.
- Text colors on buttons — usually white on dark backgrounds, black on light. Make sure there’s good contrast or the text will be hard to read.
Step 2 — Apply your colors #
- Go to Settings → Watch Page Branding.
- Click any color swatch to open a color picker.
- Use the picker to choose a color, or paste in a hex code (like
#1F8FF0). - As you change each color, the live preview on the right shows you what your watch page will look like.
- Click Save when you’re done.
Success Check: Open one of your existing videos in a new tab — the watch page should now reflect your new colors.
Step 3 — Test it on a real video #
The best way to know your colors work is to open a real watch page on multiple devices.
- Go to My Videos and copy a watch page link.
- Open it on your laptop, your phone, and tablet if you have one.
- Watch the video. Click the buttons. Look at it under both bright and dim lighting.
If anything looks off — buttons hard to see, text washing out against the background, CTA not popping — go back and adjust.
Accessibility tip: contrast matters #
A button you can’t read isn’t a button people will click. WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 between text and its background.
Easiest way to check: paste your button background color and text color into a free tool like WebAIM’s Contrast Checker. It’ll tell you whether the combination passes.
If your contrast is too low, either lighten the background or darken the text (or vice versa) until it passes.
Resetting to defaults #
If you’ve experimented and want to start over, scroll to the bottom of the Branding settings and click Reset to defaults. This restores MyVideo.Email’s default color palette — neutral, accessible, and professional.
What’s NOT customizable (yet) #
These are coming, but aren’t yet available:
- Logo upload on the watch page
- Custom fonts
- Background images or patterns
- Full HTML/CSS overrides
For now, color customization is the main lever. If your brand depends heavily on a logo presence on the watch page, contact support — we may be able to surface a beta option.
Troubleshooting #
I changed colors but my watch page still looks the same. Hard refresh the watch page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows). Browser caching may be holding onto the old styles. New visits and new sends use the updated colors immediately.
The color picker won’t let me paste a hex code. Make sure you’re entering 6 characters (or 3 short form, like #FFF). The leading # is optional in most pickers. If you copied a code with extra whitespace, paste it into a text field first to clean it up.
My recipient sees different colors than I do. This is almost always a browser dark-mode setting on the recipient’s device. Modern browsers can invert colors when in dark mode. There’s no way to override this from your side — recipients control their own dark mode preference.
The CTA button is invisible on my background. You’ve probably picked a CTA color that’s identical or very close to your background color. Open the CTA color picker and choose something with more contrast.
