Please note this is not about the Youtube app. It is about using the Youtube website on a desktop from a browser.

I am using the old Youtube website layout (?disable_polymer=1).

One of the features of the unbearable new layout is auto-playing three seconds of the video when you hover the mouse over the thumbnail.

Fortunately, this feature did not work in the old layout I've been using.
Unfortunately, it does now. They've "fixed" it, it now works regardless of the layout.

This feature is as annoying as it gets because I have to be very careful about how I move the mouse and where I may rest it. Not a single time in the last several months have I willingly invoked the 3-second autoplay, but I've been subjected to hundreds upon hundreds of unwanted autoplays when I would not move the mouse fast enough or would be careless enough to rest it on a thumbnail. The preview is never relevant, and there are only two possible outcomes from it playing: if you're lucky, you get three seconds of out-of-context nonsense, and if you are not lucky, a plot twist from the video is revealed before you even start watching.

I really want to disable this play-on-hover abomination.
I am using Firefox and I have Stylus and GreaseMonkey installed, but I just cannot figure what element of the webpage I'm looking for.
It does not appear that I can "Inspect" the element that is the live preview - it opens the document tree in the developer tools, but there isn't a node that represents the preview.
I can "Inspect" the link under the thumbnail and dig around it in the tree, but still cannot fund anything.

The only remotely relevant information that I was able to find on the subject is this Reddit post that suggests using a userscript:

// ==UserScript==
// @name         Hide Thumbnails
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("ytd-thumbnail {display:none}");

This does not work, neither as a GreaseMonkey script nor as a Stylus stylesheet. There does not appear to be an element labeled ytd-thumbnail in any way.

How do I disable the live thumbnails on the Youtube website, so that a video does not play when I hover the mouse over the thumbnail?


I've tracked it down. The live thumbnails are created dynamically and removed from the document when the mouse leaves, so they are difficult to track.

The involved classes are mouseover-play and mouseover-img, so this Stylus custom stylesheet will get rid of them:

@-moz-document url-prefix("http://www.youtube.com/"), url-prefix("https://www.youtube.com/") {
    /* Remove the idiotic live thumbnails on Youtube */
    .mouseover-play, .mouseover-img {
        display: none !important;

However this still executes the event handlers bound to the thumbnails, and even though you won't see the live preview, it would query it off the server, wasting about 200Kb of traffic each time you move the mouse over a thumbnail. To stop this completely, a GreaseMonkey script is required:

// ==UserScript==
// @name        Remove idiotic live thumbnails on Youtube
// @namespace   gserg
// @include     youtube.com/*
// @include     http://www.youtube.com/*
// @include     https://www.youtube.com/*
// @version     1
// @grant       none
// ==/UserScript==

document.querySelectorAll(".yt-thumb-simple > img[data-mouseover-src]").forEach(i => {
    i.onload = null;

With the script in place, you don't really need the Stylus stylesheet. It will now only hide the semi-transparent "Play" triangle that shows after the live preview finishes playing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.