Heya all. I thought I’d chime in with a quick guide on how to adjust subtitle font size, give it an outline, and set the vertical positioning in Chrome on Windows, since it’s not (currently) supported in the settings. The result will look like this: https://ibb.co/fAr9xv. It works by overriding some of the (limited available) css styles used by html5 video.
- Install the extension ‘User CSS’ here: https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb. Once installed, it’ll add a little icon in the top-right corner of your Chrome window that says “{css}”. This extension allows you to add your own styling code to individual websites.
- Load one of the Viki videos.
- When the video’s playing, click on the {css} button and paste in the text at the bottom of the post. It’ll look like this: https://ibb.co/mT6WAF
- You’re done! it should take effect as soon as it’s pasted in.
Do note though that the outline isn’t actually an outline. It’s using dropshadows to simulate one, since the outline effect available Chrome is very limited (the outline appears inside the letters, not outside, which looks truly awful). Generally, this solution works fine. Credit for the outline to the kind dude Nial here.
Cheers, and I hope it’s helpful to someone out there.
The css to paste in:
::cue {
/* Change the font size */
font-size: 120% !important;/* Make the text have a shadow that simulates an outline */
text-shadow:
4px 0px 0 rgba(0,0,0,0.7),
4px 1px 0 rgba(0,0,0,0.7),
3px 2px 0 rgba(0,0,0,0.7),
3px 3px 0 rgba(0,0,0,0.7),
2px 3px 0 rgba(0,0,0,0.7),
1px 4px 0 rgba(0,0,0,0.7),
0px 4px 0 rgba(0,0,0,0.7), -1px 4px 0 rgba(0,0,0,0.7), -2px 3px 0 rgba(0,0,0,0.7), -3px 3px 0 rgba(0,0,0,0.7), -3px 2px 0 rgba(0,0,0,0.7), -4px 1px 0 rgba(0,0,0,0.7),
-4px 0px 0 rgba(0,0,0,0.7), -4px -1px 0 rgba(0,0,0,0.7), -3px -2px 0 rgba(0,0,0,0.7), -3px -3px 0 rgba(0,0,0,0.7), -2px -3px 0 rgba(0,0,0,0.7), -1px -4px 0 rgba(0,0,0,0.7),
0px -4px 0 rgba(0,0,0,0.7), 1px -4px 0 rgba(0,0,0,0.7), 2px -3px 0 rgba(0,0,0,0.7), 3px -3px 0 rgba(0,0,0,0.7), 3px -2px 0 rgba(0,0,0,0.7), 4px -1px 0 rgba(0,0,0,0.7);}
video::-webkit-media-text-track-display
{
/* Every -1.5em will push the subtitles up one line. The default is -1.5em, so my setting here will push subtitles up one line higher. */
transform: translateY(-3em) !important;
}