Skip Ad Button Disappeared

[nixternal]

Noticed, probably the last week or 2, that the Skip Ad button no longer appears.

Chrome Version: 78.0.3904.108

Happens on both my Linux & Windows boxes.

[x0a]

Hey, Thanks for the bug report.

Is the entire AdOptions button missing on ads or is it just the 'Force Skip' button?

Can you post a screenshot the next time this happens? I suspect that YouTube might be partially rolling out/testing a new video player for specific users. They do things like that every few months, drastically changing the styles so the extension can't find where to place the buttons.

If that's the problem, then it should be an easy fix once I get a hold of the new styles.

[nixternal]

No, the AdOptions button & all that is just fine, YouTube has that "Skip Ad" button after 5 seconds, that is what has disappeared.

You might be right about YT rolling out stuff because I have noticed changes actually, like big thumbnails on my main page, and if I were to think about it, that might be about the time it started to happen. Anything I can do to help let me know, I can inspect stuff in Chrome, I do it every day looking for my screwed up code :D

[x0a]

Ah yes, thanks for the screenshot. That clears things up. I've seen this problem before, and it's actually not caused by this extension but by YouTube intentionally hiding the skip button with a class. I previously fixed their 'bug' by removing the class. All the '.video-ads' class does is hide the entire video info overlay, including the 'Skip Ads' button. https://github.com/x0a/uBO-YouTube/blob/464e844dccfdb28c90d2d79aa6ddc789bb779106/src/inject.ts#L149-L157

But they might have changed to a different class.

When the 'Skip Ad(s)' button should appear, try finding the button in the console with:

document.querySelector(".ytp-ad-skip-button-container")

Right click on the element and click 'Reveal in Elements panel'. And take a screenshot of the sorrounding HTML.

Should give me some clues as to what is going on.

Thanks

[nixternal]

Here you go.

[nixternal]

Ooh, I have a small update on this. I just clicked on a video to watch & let the 1st Ad run all the way through. When the 2nd ad started the "Skip Ad" button showed up.

[x0a]

Thanks. That actually looks fairly ordinary and gives no real reason why it should be hidden. Can you post the output of

document.querySelector('.ytp-ad-module').outerHTML

Perhaps the button is being hidden inside of its container, as opposed to the container being hidden. If all else fails, I'll write up a small function tomorrow to identify which ancestors in the tree have "display: none" and that should give us a definitive answer.

[x0a]

On second thought, forget the above and run this:

(() => {
  let el = document.querySelector('.ytp-ad-skip-button-text')
  while(el !== document.body){
    const style = getComputedStyle(el);
    if(style.display.indexOf('none') === 0 || style.visibility.indexOf('hidden') === 0){
      console.log(el.tagName, el.className, el.id)
    }
    el = el.parentElement;
  }
})()

[nixternal]

<div class="ytp-ad-module" data-layer="4">
    <div class="ytp-ad-player-overlay" id="player-overlay:o" style="">
        <div class="ytp-ad-player-overlay-flyout-cta"></div>
        <div class="ytp-ad-player-overlay-instream-info"><span class="ytp-ad-simple-ad-badge" id="simple-ad-badge:v" style=""><div class="ytp-ad-text" id="simple-ad-badge:w" style="">Ad ·</div></span><span class="ytp-ad-duration-remaining" id="ad-duration-remaining:x" style=""><div class="ytp-ad-text" id="ad-text:y" style="">0:25</div></span><span class="ytp-ad-hover-text-button ytp-ad-info-hover-text-button" id="ad-info-hover-text-button:z" style=""><button class="ytp-ad-button ytp-ad-button-link ytp-ad-clickable" id="button:10" style=""><span class="ytp-ad-button-icon"><svg fill="#fff" height="100%" version="1.1" viewBox="0 0 48 48" width="100%"><path d="M0 0h48v48H0z" fill="none"></path><path d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z"></path></svg></span></button>
            <div class="ytp-ad-hover-text-container ytp-ad-info-hover-text-short">Why this ad?
                <div class="ytp-ad-hover-text-callout"></div>
            </div>
            </span>
            <button class="ytp-ad-button ytp-ad-visit-advertiser-button ytp-ad-button-link" id="visit-advertiser:13" aria-label="chicagoland.hondadealers.com" style=""><span class="ytp-ad-button-text">chicagoland.hondadealers.com</span><span class="ytp-ad-button-icon"><svg fill="#fff" height="100%" version="1.1" viewBox="0 0 48 48" width="100%"><path d="M0 0h48v48H0z" fill="none"></path><path d="M38 38H10V10h14V6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V24h-4v14zM28 6v4h7.17L15.51 29.66l2.83 2.83L38 12.83V20h4V6H28z"></path></svg></span></button>
        </div>
        <div class="ytp-ad-player-overlay-skip-or-preview">
            <div class="ytp-ad-skip-ad-slot" id="skip-button:p" style="">
                <div class="ytp-ad-preview-slot" id="preskip-component:q" style=""><span class="ytp-ad-preview-container countdown-next-to-thumbnail" style=""><div class="ytp-ad-text ytp-ad-preview-text" id="ad-text:r" style="">1</div><span class="ytp-ad-preview-image"><img class="ytp-ad-image" id="ad-image:s" src="https://i.ytimg.com/vi/4bkq1jmThic/mqdefault.jpg" alt="" style=""></span></span>
                </div>
                <div class="ytp-ad-skip-button-slot" id="skip-button:t" style="display: none;"><span class="ytp-ad-skip-button-container" style="display: none;"><button class="ytp-ad-skip-button ytp-button"><div class="ytp-ad-text ytp-ad-skip-button-text" id="ad-text:u" style="">Skip Ad</div><span class="ytp-ad-skip-button-icon"><svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"><use class="ytp-svg-shadow" xlink:href="#ytp-id-158"></use><path class="ytp-svg-fill" d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z" id="ytp-id-158"></path></svg></span></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="ytp-ad-player-overlay-progress-bar"></div>
        <div class="ytp-ad-player-overlay-instream-user-sentiment"></div>
        <div class="ytp-ad-info-dialog-background" id="ad-info-dialog:11" style="display: none;">
            <div class="ytp-ad-info-dialog-container">
                <div class="ytp-ad-info-dialog-form">
                    <div class="ytp-ad-info-dialog-title">You've turned off ad personalization from Google, so this ad is not customized based on your data. This ad was shown based on other factors, for example:</div>
                    <ul class="ytp-ad-info-dialog-ad-reasons">
                        <li>The time of day</li>
                        <li>The video you're watching</li>
                        <li>Your general location (like your country or city)</li>
                    </ul>
                    <div class="ytp-ad-info-dialog-message"><span><span><br></span><span>Visit Google's </span><a href="https://adssettings.google.com" target="_blank" class="ytp-ad-has-logging-urls">Ad Settings</a><span> to learn more about how ads are targeted or to opt out of personalized ads.</span></span>
                    </div>
                    <div class="ytp-ad-info-dialog-mute-container"></div>
                    <div class="ytp-ad-info-dialog-confirm-container">
                        <button class="ytp-ad-info-dialog-confirm-button">CLOSE</button>
                    </div>
                </div>
            </div>
            <button class="ytp-ad-button ytp-ad-info-dialog-close-button ytp-ad-button-link" id="button:12" style="display: none;"><span class="ytp-ad-button-icon"><svg height="100%" viewBox="0 0 24 24" width="100%"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"></path></svg></span></button>
        </div>
    </div>
</div>

[nixternal]

This is the output in console from the other command you sent:

DIV ytp-ad-module VM268:6 <- undefined

[x0a]

That's very interesting. From the HTML and the command you just ran there's no additional classes being added to hide the .ytp-ad-module element. It's possible we are getting a different versions of CSS.

document.querySelector('#player-css').getAttribute('href')

Gives me /yts/cssbin/player-vflkiZPlm/www-player-webp.css, can you confirm you get the same?

In any case, I'll push a temporary fix that forces display: block !important to the .ytp-ad-module element to prevent it from being hidden by YouTube.

[nixternal]

/yts/cssbin/player-vflkiZPlm/www-player-webp.css

Looks the same to me. Crazy thing, the button appears sometimes, but it seems most of the time it doesn't.

[x0a]

If you're up for it, you can try the new test build to confirm if it solves the problem, causes any unintended behavior, etc: https://github.com/x0a/uBO-YouTube/releases/tag/v0.9.8-alpha

I'm intending it as a temporary fix until I find what's actually hiding the button. But if it works well it might just stay.

[nixternal]

Just updated & it's still the same. When I wasn't testing this, ads were left & right. Start testing & ad's hardly pop up :D

[nixternal]

Noticing that some ads show the skip button every time, some ads never show it.

[x0a]

Just to clarify, I haven't released this version to the store yet so it shouldn't be available to update.

If you download the ZIP file above, you can unzip it to any directory, go to Extensions, toggle 'Developer mode', and then click 'Load unpacked' and point it to the directory that was unzipped. Disable the production version first.

I'm going to be testing it myself for a few days (or maybe just one) just to make sure it doesn't break anything. Feel free to try anytime you like. 👍

In the meantime I'm going to build some utilities into the extension to better be able to detect missing elements and fix where necessary.

[nixternal]

I totally removed the previous version & loaded the new version. The skip ad button is hit or miss on whether it is there or not. Definitely not the end of the world. Thanks for the guidance though this evening, greatly appreciated. Thanks for making this extension, as it allows me to support those who I sub to (mostly devs, 3d printing, audiophile, and guitar stuff).

[x0a]

Always happy to hear that 👍

Still would be nice to fix, as I think there is a tendency for people to blame the extension as opposed to YouTube (speaking of, the problem still happens with this extension disabled, right?)

Can you see if this unhides the button (run maybe 5-8 seconds after ad begins playing):

(() => {
  const cssStyle = document.createElement("style");
  cssStyle.setAttribute("type", "text/css");
  cssStyle.textContent = ".force-show{display: block !important; opacity: 1 !important; visibility: visible !important}";
  document.documentElement.appendChild(cssStyle);

  let el = document.querySelector('.ytp-ad-skip-button-text');

  const fix = (el, style) => {
    console.log(el.tagName, el.className, el.id, style.display, style.visibility, style.opacity);
    el.classList.add('force-show');
  }

  while (el !== document.body) {
    const style = getComputedStyle(el);

    if (style.display.indexOf('none') === 0) {
      fix(el, style);
    } else if (style.visibility.indexOf('hidden') === 0) {
      fix(el, style);
    } else if (parseFloat(style.opacity) < 0.8) {
      fix(el, style);
    }
    el = el.parentElement;
  }
})()

And paste any output. Thanks

[nixternal]

This is crazy. Today it is working perfectly fine :D Go figure. If it happens again, I will run that & paste the output.

[nixternal]

SPAN ytp-ad-skip-button-container block visible 0.7 DIV ytp-ad-module none visible 1 Unhiding DIV ytp-ad-module force-show null

Doesn't make the button appear.

[x0a]

Well, I have to say I'm pretty stumped. That goes up the entire chain of elements to the tag and should forcibly show anything hidden. The only other possibilities is that ytp-ad-module has a z-index less than the video player, or a position off screen. Or even a height/width of zero.

I'm going to put this one on hold for a while and try to reproduce with other machines/accounts.

If you're good with CSS and are good working with the developer tools, you could also try to find out what's hiding the button from your end (if not, no worries).

[x0a]

So I was finally able to reproduce the bug with a Grammarly ad and it seems that some EasyList rules are the culprit, and are hiding the .ytp-ad-module. They're not removed when uBlock Origin is disabled and since they are injected via content script, they can't be removed and they have priority over the rules that we inject (via script tag). What made this difficult to debug is that the developer tools still show that our rules are active (not overridden), yet the element is still hidden. Seems there's a discrepancy between the CSS engine and the developer tools.

Try this 5 seconds after an ad starts playing:

document.querySelector('.ytp-ad-module').className = 'ytp-ad-module-renamed'

If that works, should be an easy solution to just replicate the class and use our own.

[nixternal]

That works like a champ!

[x0a]

I just pushed a new update to the Chrome Web Store for v0.9.8 including the new fixes. Should be available anywhere within the next 30 mins to a whole day. If you want to try it early you can download it here: https://github.com/x0a/uBO-YouTube/releases/tag/v0.9.8-beta

Feel 100% free to re-open this issue and report back with any new issues you encounter as a result of this change.

[nixternal]

Just went 10 for 10, 100% success rate. Great job & thanks a ton!