First hides those boxes that cover the last minute of "some website's" videos
javascript:(function(){ let q, qq;
qq=document.getElementsByClassName("ytp-ce-element");for(q of qq){q.style.display="none";}
})()
This works when invoked as a bookmarklet.
Second one removes sidebars, and expands the meat of (some of) our prez's favorite medium
javascript:(function(){ let q, qq;
qq=document.querySelectorAll("[role=banner]");for(q of qq){ q.style.display="none"};
qq=document.querySelector("[data-testid='sidebarColumn']"); qq.style.display="none";
qq=document.querySelectorAll(".r-rthrr5"); for(q of qq) {q.style.width="100%"; q.style.maxWidth="100%"};
qq=document.querySelectorAll(".r-1ye8kvj"); for(q of qq) {q.style.width="100%"; q.style.maxWidth="100%"};
qq=document.querySelector("[data-testid=primaryColumn]"); qq.style.width="81%"; qq.style.maxWidth="82%";
})()
This does not work as a bookmarklet, but both work just fine when dropped into Firefox's developer tools.
Why does only the first one work as a bookmarklet and then both work in DevTools?