Distraction-free YouTube

It is often difficult to search for a content on a particular subject with all those distracting click-bait thumbnails scattered around.

Luckily, Safari on Mac has a useful function allowing you to insert a custom CSS stylesheet.

Other browsers then Safari might need an additional extension to customise the look of pages on the web.

The code

/* YT */


#related,
ytd-section-list-renderer[page-subtype="home"],
#masthead-ad,
ytd-rich-grid-renderer,
ytd-mealbar-promo-renderer
{
    display:none !important;
}
ytd-browse[page-subtype="home"] {
    background-color:gray;
    /* here is my YT background wallpaper, leave it or use a different url */
    background-image:url('https://webshare.mattr.co.uk/youtube-bgd.jpg');
    background-size:cover;
	background-attachment:fixed;
    background-position:50% 50%;
	min-height:90vh;
}

#content {
	min-height:100%;
}

Access the junk content

There is an easy way to see whatever YouTube algorithm has come-up with, even with a ‘cleaned’ homepage. You can just click on the ‘Trending’ link. Personally, I am never tempted to do so…

A little extra

Below there is a CSS snippet to improve the readability of Wikipedia articles. It changes the default, tiny, sans-serif font to slightly larger Georgia as well as limits the length of a verse.

/* Wikipedia */
.mediawiki .mw-content-ltr {
	font-family: Georgia, serif;
	font-size: 17px;
	line-height: 1.6em;
}
.mediawiki .mw-content-ltr p {
	max-width: 36em;
}