how to edit the subtitle of YouTube with chrome extension - javascript

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?

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.

Related

having issues with javascript style properties of an html element

I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.

Different font-family for two different parts of the same string

.my-link::after {
content: "text \2661";
font-family: Arial,sans-serif;
}
Looking at the code above I need to set the font-family for the content of the pseudo element.That's wouldn't be a problem.
But I need to set the font-family for the text part to Arial and the font family for the \2661 part to Helvetica.
Basically two different font-families for different parts of the same string.
Is there any way to achieve this with only CSS or Sass?
Otherwise I can just think of setting the font-family for the whole content of the pseudo element via CSS to Arial and then write a JavaScript function, which goes through the string inside the content of the pseudo element, find the \2661 part and changes its font-family to Helvetica.
Any suggestions, idea, hints etc would be appreciated.
Use a combination of before & after to achieve this. Ensure that the pseudos are floating right and they'll end up looking like they're both appearing after the link.
https://jsfiddle.net/zxwkjmt3/
This works assuming your links are display:inline-block;
.my-link {
display: inline-block;
}
.my-link::before {
content: '\2661';
float: right;
font-family: Helvetica,sans-serif;
}
.my-link::after {
content: 'text';
float: right;
font-family: Arial,sans-serif;
}
Link
Edit: It's worth noting, avoid thinking of pseudo's as nested elements, they are not. They'll give with a little extra flexibility but they're limited in what you can do, if possible nesting actual elements gives you the most flexibility.

How do I unbold text beside javascript?

I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****
It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).
You could try adding this rule to the "red" class.
font-weight: initial;

How do I vertically fill a container with uppercase text using JS/CSS?

I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.
line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )
Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};
Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.
So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.

Javascript: Divs not recognized?

I've been playing around with Javascript to modify the background and theme of my page, http://www.gfcf14greendream.com/, so that it displays a different background in each season, and that works. Now since everything was green before (I am such a freak), I've been experimenting to change the font color of div tags to a readable color depending on the background (for now I'm using a purple on the summer background, rgb(128, 0, 128) but if anyone thinks there is a better color let me know), and it has worked, using these lines:
var divs = window.parent.document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.color = "rgb(128, 0, 128)";
}
It does work, for these pages that I changed (I haven't changed all since I'm still testing) http://www.gfcf14greendream.com/smssender.html , http://www.gfcf14greendream.com/employmentassistant.html . But while it seems like it works for this page, http://www.gfcf14greendream.com/programs.html , the divs that are inside the table are unaffected (like this div:)
<td align="center">
<div style="text-align: center; color:#00FF00; font-size: 15px">
<font color="#00FF00">December 16th, 2012</font>
</div>
</td>
So why is it the divs within a <table> tag are not recognized? Should I deem tables as obsolete (someone told me they're evil) and try to format one with divs using CSS?
at the moment this isn't working because of the <font> tag. The divs style is being affected, however the font tag within is not allowing you to see the changes. Remove the font tag and you should see something.
With that said, you shouldn't be using the <font> tag at all. W3 tells us HTML5 classifies it as a non-conforming feature, and "... really, don't use it."
You should really avoid the font tags, as Jan Dvorak pointed out. But even with them, it can be solved with just CSS:
div, div font {
color: rgb(128, 0, 128) !important;
}
I'd also add a season class to the body (as in <body class="summer">), so I can create multiple styles according to the season:
.summer div, .summer div font { color: rgb(128, 0, 128) !important; }
.winter div, .winter div font { color: rgb(0, 0, 255) !important; }
That's because these divs have 'style' attributes, and they override properties you assign with JS. However, it's better to use CSS instead of such magic, just as #bfavaretto said :)
upd. I wasn't correct at all, thing is font tags have 'style' attributes, and these override property you assign to their parent, div.
the color of div is modified, but the text is not,this because your text is actually in "font" tag
I see your pages are referencing jquery, try to use this:
$('div,div>font').css('color','rgb(128,0,128)')

Categories

Resources