There is a uBlock filter floating around which hides all video thumbnails, if the time span of the associated text is shorter than 70 seconds:
www.youtube.com##ytd-browse ytd-grid-video-renderer:has(span.ytd-thumbnail-overlay-time-status-renderer:has-text(/\s(0:\d\d|1:0\d)\s/))
But I do not want to block everything while loading. I just like to be able to hide the elements after loading a user's video overview page. I've searched at stackoverflow and found this bookmarklet which hides images by getElementsByTagName:
javascript bookmarklet to hide all images from current webpage?
javascript:(function(){var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++)imgs[i].style.visibility="hidden"}());
I lost some hairs while adapting this bookmarklet to match it to the CSS selector written above with getElementsByClassName. It just didn't work. The text element (span.ytd-thumbnail-overlay-time-status-renderer:has-text) should be under 70 seconds and the parent element ytd-grid-video-renderer should then be removed. Why can't I get this to work?
I've found a working solution by myself, I wasn't aware of the fact that I have to do the search in javascript rather than in CSS selector. This line of code does exactly what I want:
javascript:(function(){var tn=document.getElementsByClassName("ytd-thumbnail-overlay-time-status-renderer");for(var i=0;i<tn.length;i++)if(tn[i].textContent.match(/\s(0:\d\d|1:0\d)\s/))tn[i].closest("ytd-grid-video-renderer").style.visibility="hidden"}());