how to edit the subtitle of YouTube with chrome extension

Question

i want to edit the font style of youtube videos i saw in inspect mode of youtube.com that a span tag with ytp-caption-segment wrappes the text file of subtitle.so i use below code to capture this element:

 var subtitle=document.getElementsByClassName('ytp-caption-segment');

but it always returns undefined,so i can not get the other attributes of it? what can i do? i think the reason is subtitle appears 1 sec after starting of video,so the visibility or display of it maybe none.any idea?

why do you want to use Javascript? try to inject some CSS styles — izik, Jul 30 '20 at 14:16
[How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) — wOxxOm, Jul 30 '20 at 14:50

score 0 · Answer 1 · answered Aug 02 '20 at 00:06

The span.ytp-caption-segment element is not a persistent part of the video player, it exists in the DOM only when you see a line of subtitle displayed. When the subtitle disappears, the element is removed from the DOM and it's created again with the next subtitle line.

So basically you have two strategies:

1. Insert a CSS rule for .ytp-caption-segment

This is the simplest way but unfortunately this won't work perfectly in this case because Youtube generates a lot of inline style rules into ytp-caption-element, and that cannot be overwritten from CSS.

These are the inline styles used by Youtube (at least for currently):

display: inline-block;
white-space: pre-wrap;
background: rgba(8, 8, 8, 0.75);
font-size: 20.7556px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
font-family: "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;

These are mostly the parameters you can set in Youtube UI (subtitle options).

CSS still can be used in limited ways, depending on your goal. For example if you want to make bigger fonts, you can use 'transform: scale(2);' instead of the font-size (the transform property is not overwritten with inline CSS).

2. Rewrite the .ytp-caption-segment element

If you want full control, you have to delete the style attribute from ytp-caption-segment or rewrite with your own style. This is not trivial, I describe the main steps:

Insert a CSS rule which hides the subtitle so when a new line is created by the player, it won't appear immediately on the screen. (This could be done with transform or opacity rules.)
Listen for any new lines! (Using a MutationObserver is the preferred way, but a 100msec polling will work also as an easy hack.)
When you got the line, rewrite it's style attribute to your preferred style.
Don't forget to override the CSS rule from point 1. used for hiding the new line! It's easy, as you rewrite the style attribute anyway.

I can create a code snippet for this if you clarify exactly what do you want to change on the subtitle.

how to edit the subtitle of YouTube with chrome extension

1 Answers1