Hiding the YouTube search bar
This morning, I got an email from Sam, asking if I had a way to cover up the persistent YouTube search bar:
If we do “Inspect Element” on a YouTube page, we can find the element that contains this search box:
var search_bar = document.getElementById("yt-masthead-container"); // Check if it's already hidden var hidden = (window.getComputedStyle(search_bar)).getPropertyValue("display"); // Set the visibility based on the opposite of the current state void(search_bar.style.display = (hidden == "none" ? "" : "none"));
To use this code, drag this link to your bookmarks bar:
Toggle the YouTube search bar
Simply click it once to make the bar disappear, and click it again to bring it all back.
Something that wasn’t in my original Google Maps bookmarklet is that
void() call. It turns out that if a bookmarklet returns a value, it’s supposed to replace the current page with that value. Which strikes me as bizarre, but that’s what Chrome does, so it broke the page. (Safari doesn’t – not sure if that’s a bug or a feature.) The void function prevents that from happening.
This isn’t perfect – content below the bar doesn’t reflow to take up the available space – but the bar no longer hangs over content as you scroll. I think I’ll find this useful when I’m pressed for space on small screens. It’s a bit more screen real-estate I can reclaim. Thanks for the idea, Sam!