YouTubeで一時停止するとコントロールバーが出てしまい、PC版LINEの「画面キャプチャ」のようなツールで注釈を描きながらスクショしたい場合に邪魔です。

調べてみる

これを解消するブックマークレットを紹介しているサイトに辿り着きましたが、

一時停止したYouTube動画のコントロールバーを非表示にする方法

https://youtubedownload.minitool.com/jp/youtube/how-to-hide-youtube-bar.html

なんか画面下に黒いグラデが残る。

中身はcssクラスを指定してdisplay:noneしているだけなので、グラデにあたるブロックのcssが分かれば消せそう。

javascript:(function(){var goaway=".ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();

YouTubeページのソース見るとytp-gradient-bottomでグラデを表示しているっぽいので、コードを改良。

完成品

画面下グラデも消す改良版

このコードをブックマークとして保存しておけば、ワンクリックでYouTube動画のコントローラーを非表示に出来る。再生再開する際にいちいちページ更新してられないので、再表示させる方も。

消す方

javascript:(function(){var goaway=".ytp-chrome-top,.ytp-chrome-bottom,.ytp-gradient-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();

表示に戻す方

javascript:(function(){var goaway=".ytp-chrome-top,.ytp-chrome-bottom,.ytp-gradient-bottom{display:block;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();