CODEWITHSUNDEEP
javascripthtmlcssyoutubeconsole
ericmp
ericmp

Reputation: 2267

How to change the color of the Youtube Like button?

Problem

I am trying to change the color of Youtubes Like-button from the default color to blue:

https://i.imgur.com/xmsDFZK.png

I easily managed to do it with the browser developer tools:

https://i.imgur.com/P6snS2p.png

via Console

However, now I am trying to do it programmatically, for example via the console. But I am not sure what exactly to put in there to correctly identify the Like-button.

I tried the following but it did not work, it had no effect at all:

document.querySelector('.style-scope .ytd-toggle-button-renderer')
    .querySelector(".style-scope .yt-icon")
    .getElementsByTagName("path")[0]
    .style.color = "blue"

What is the correct way to identify the Like-button and to change its color?

Details

The Like-button appears to be coded like this:

<yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text" touch-feedback="">
    <button id="button" class="style-scope yt-icon-button" aria-label="Ich mag das Video (wie 11.598.005 andere auch)" aria-pressed="false">
        <yt-icon class="style-scope ytd-toggle-button-renderer">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
                <g class="style-scope yt-icon">
                    <path ...>...</path>
                </g>
            </svg>
        </yt-icon>
    </button>
    <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
        <div class="stroke style-scope yt-interaction">
        </div>
        <div class="fill style-scope yt-interaction">
        </div>
    </yt-interaction>
</yt-icon-button>

Where the actual button I want to change is this line here

<yt-icon class="style-scope ytd-toggle-button-renderer">

I am using the latest Firefox (91.0.2), Desktop version.

Upvotes: 1

Views: 2071

Answers (2)

Dhrubajyoti Gogoi
Dhrubajyoti Gogoi

Reputation: 1340

Youtube may possibly change the layout based on various factors. On Firefox this seems to work:

document.querySelectorAll('#menu-container #top-level-buttons-computed #button > yt-icon > svg > g > path')[0].style.color="blue";

Upvotes: 3

Tuhin Kanti Pal
Tuhin Kanti Pal

Reputation: 63

Try like this

document.querySelector('.style-scope > .yt-icon > path")[0]

Upvotes: 0

Related Questions