A Shopify store owner using Dawn theme wants to change all video player controls from default white to a custom gold color (#AF8C53) to match their site branding. They want to keep the black-to-clear gradient filter at the bottom of videos.
Current Progress:
Successfully changed timestamp text to gold using CSS code in base.css
Other controls (play/pause buttons, timeline, progress bar) remain white despite multiple attempts
The large center play button reverts to white after first playback
Solutions Offered:
Third-party video players: Suggestions to use Video.js or Plyr.io libraries for easier customization with predefined templates
Custom controls approach: Mageplaza indicated that completely modifying default video controls appears impossible, recommending instead to hide native controls and build custom HTML5 video controls from scratch (provided tutorial link)
Current Status:
Store is now live at Toonrific.com with the video on homepage
User bookmarked the custom controls tutorial but faces technical limitations (older Windows 8.1/Chrome browser)
Plans to upgrade system and implement solution after achieving initial sales
Issue remains unresolved; discussion is ongoing
Summarized with AI on November 5.
AI used: claude-sonnet-4-5-20250929.
I wish to change the whole-of site settings for all video controls on my Dawn 14 store, so they match the main site color, instead of being default white.
(Behind the white is a black-to-clear-gradient filter in the footer section of every video, that I do wish to keep.)
So far, by using code suggested by chatGPT, and added to the end of the base.css file, I have managed to change the timestamp text to Gold #AF8C53 …
but despite many attempts with various ai suggestions, the other icons, timeline and progression bar are still white.
The code that I added to the end of the base.css file to achieve this much is pasted below.
Can anybody suggest a solution please?
Code for text color:
/* Change the color of video control icons and timeline */
video::-webkit-media-controls {
background-color: transparent !important;
color: #AF8C53 !important;
}
Having a video player on site with a theme colour is a good choice. I can suggest you some free js library plugins: video js( https://videojs.com/ ) and player.io( https://plyr.io/ )
Suppose you are looking for a quick predefined template. video.js will be the best option for that, it has a lot of templates you can choose from.
But if you need easy customisation of the player then plyr.io will be the option to go with, as it offers easy customization of the video player and its controls.
You can easily add any of these libraries from their GitHub pages.
It can be found on their respective websites.
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
It’s not published yet, sorry. It has more than one domain pointing to various pages, which has caused a problem that shopify are currently sorting out for me.
Hi Mageplaza; My page is live now: Toonrific.com and the video in question is the 2nd image on the homepage.
This is my first store, so I asked ChatGPT for advice, which was only partially successful:
eg: Edit:
Base.css inserted the following snippet at the end, which changes white timecode on video controls to my custom gold #AF8C53 =
in Dawn 15:
/* Change the color of video control icons and timeline */
video::-webkit-media-controls {
background-color: transparent !important;
color: #AF8C53 !important;
}
We’ve checked your website and it seems impossible to modify the default video controls completely. However, you can hide them and implement custom controls instead. You can refer to this guide for building custom controls: https://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
Wow thanks for such an insightful reply. It took me a while to wrap my newbie head around it, but alas, I let you down by also being a dinosaur, (still functioning way back on Windows 8.1), so my old chrome browser couldn’t handle it.
However, I have bookmarked this tip, downloaded all the assets from those links, and I hope to be able to update my system as a priority as soon as I can achieve some sales from my shopify store first.
Many thanks in the meantime. Very greatly appreciated.
