Cannot play videos on Yahoo! News?

Symptom: This often happens with users of Firefox and other Gecko-based browsers, when:
• they can't show most news videos on the Yahoo! News website and some other Yahoo! properties;
• the commenting system is not functional (can't properly view and post comments).

Privacy-conscious users, and/or those who wish for their browsers to consume less resources, use a script blocking add-on, such as NoScript. I often have NoScript configured to allow/disallow full domains (like d.yimg.com) and not just second-level domains (just yimg.com).

As it often happens, allowing only full subdomains instead of just second-level domains brings with itself more issues.

By default, NoScript includes a whitelist of second-level domains without which major services' functionality would be wholly disabled. The whitelist also contains yahoo.com, yimg.com, and yahoopis.com). The instructions herein are for users who have chosen to impose a more fine-grained control over the websites they visit.

Right, well, I finally played around with NoScript and found a solution:

NoScript:

In addition to news.yahoo.com and screen.yahoo.com and maybe others, allow the following domains essential for video playback:
• l.yimg.com
• d.yimg.com
• connect.facebook.net (If you're privacy-conscious, then allow temporarily).
  
  
11.07.2012. Update: I later discovered that non-video news items also featured videos, so here's an addition of domains that must be allowed:
• video.query.yahoo.com
• yep.video.yahoo.com
• yui.yahooapis.com (important on other Yahoo properties, even if not using video)
• webplayer.yahooapis.com

Flashblock:
• Allow d.yimg.com

^ Including only that domain in the Flashblock whitelist will have the video area rendered with the Flashblock placeholder. Clicking on it will start playback (note that ads are also played).

• Allow l.yimg.com

^ In regular news items that included video, disallowing l.yimg.com wouldn't even load the Flashblock video placeholder.

If you want video to load automatically, allow the above domains, and news.yahoo.com and screen.yahoo.com (and/or other Yahoo! properties as necessary from the Flashblock toolbar button).

Conclusion

Even if l.yimg.com and d.yimg.com are enabled in NoScript, the crucial part for some erroneous coding reason is connect.facebook.net; If that is not allowed, most video code and commenting functionality won't load. Note that connect.facebook.net is the primary culprit. This has been discussed before at forums.informaction.com (a NoScript and web security forum).

Collapsing elements in Firefox 1.0

As I was perusing Yahoo Mail Classic in Mozilla Firefox 1.0, it turned out that there was a linked block element half-blocking the sign-out link at the top of the page and in May this year, those links stopped being underlined when hovered over — this made targeting the pointer too difficult to click on the sign-out link. If I click on that block element, it will jump to a position on the page, then, somehow the block element probably moves and probably frees up the space above the sign-out link... Or whatever.

Turned out that the culprit was an invisible non-collapsed block that contained a "Skip to conent" link, which was meant for browsers like Lynx, Links, Elinks, Netscape 4.x, and other older fare (Lynx is still maintained :). This is really the fault of site coders, who instead of specifying display:none in the element's style, only specified visibility:none. The former would have collapsed the whole element, the latter only makes it invisible, but still usable and visually existent in the document structure.

If positioning is important, then one design solution is to specify a low z-index for the invisible DIV element and a correspondingly higher z-index for code that contains links (an unordered list). In CSS, z-index specifies how elements are layered with respect to each other: a higher value means that an element is above (or in front of) all other elements and a lower value (if somewhere is a higher value specified) means that the element is below, or behind higher-valued elements.

First I tried the Adblock Plus (ABP) extension, but that didn't work: ABP 0.7.0.2 is the last version for Firefox 1.0, but lacks functionality to collapse/hide elements by their id. Only the next version, 0.7.1, starts supporting this. I've written about it previously.

As I was looking for a solution, the Greasemonkey extension caught my fancy. The last to support Firefox 1.0 is 0.5.3.

Version 0.5.3 is also the last one of Greasemonkey to install on SeaMonkey 1.1, but it doesn't work.

The solution is to first install xSidebar (If the current stable versions won't want to install, then version 1.0.1 or 1.0.2 might install properly). Then on the back of xSidebar a modified Greasemonkey extension can be installed. So for SeaMonkey 1.1, Greasemonkey 0.8.2 mod is the order of the day. Note that if you have Adblock Plus 1.0.2 installed, its toolbar button will vanish. But no worries: You can turn on the Adblock Plus status bar icon from Tools > Adblock Plus Preferences...

Greasemonkey is a powerful tool to change the look and functionality of online sites and web pages client-side, but alas, it is not very easy and requires knowledge of HTML, JavaScript and CSS.

There are many instructions online on how to incorporate custom JavaScript and CSS snippets into your browser equippped with Greasemonkey and how to specify server whitelists and blacklists. I might introduce the same instructions here or put them up somewhere else.

While I thought I just had the solution, it then turned out that the block element was only equipped with a class parameter and no ID. I had also learned that only recent and modern versions of Greasemonkey now support the JavaScript getElementbyClass functionality, but I only have an outdated version.

Well, no matter: Greasemonkey 0.5.3 supports getElementbyId, but that really is not the most important thing, because Greasemonkey also allows injecting snippets of Cascading Style Sheets with JavaScript. And CSS is power.

Yes, while the DIV element did not have the ID parameter in it, it still had the CLASS parameter specified and the solution looks like this:

document.styleSheets[0].insertRule('A[class~=yucs-skipto-search] {display:none}', 0);

/* ^ • A is the linked element;
• Square brackets in the selector are used for conditional matching in the form of ELEMENT[attribute=value] — In this case, the {display:none} CSS block applies when yucs-skipto-search is found anywhere in an A tag's class attribute value (which the next point is about);
• ~= means that the pattern for the element attribute may be any matching part inside class, because when I looked at the source, the class parameter contained more than just yucs-skipto-search.
• display:none collapses the element. */

document.styleSheets[0].insertRule('A[target=_top]:hover {text-decoration:underline !important;}', 0);

/* ^ In this line, Any hovered link tag A where the target parameter exactly contains _top must be underlined when hovered over. Note that instead of ~= for any matching part inside A[TARGET ]there is a single equals sign = for an exact match. !important overrides anything provided previously and makes sure that the these links are underlined when hovered over. */

So much for now.