アイカツ!の一挙放送を見ながらAtCoder(ABC222)をする必要が生じたため。
記事の要約
このブックマークレットを実行するとPIPできるようになる(ブックマークレットの実行についてはこちらなどを参照)。
javascript:(function(){document.getElementsByClassName("tw-stream-movie-layout__splash")[0].remove()})();
環境
やってみる
そのままではツイキャスの動画をPIP表示することはできない。
PIP表示ができないサイトとしては他にニコ生やニコニコ動画があるが、これら3サイトの共通点としては「動画の前部にコメント等が表示されている」という点が挙げられる。
ということで、動画前部に表示されるものを削除してしまえば、PIP表示ができるようになるはず。
開発者ツールによると、図1に示す4つの<div>要素(▶がついているやつ)により、コメントなども含めた動画部分が構成されているようだ。
このうち動画自体を表しているのは、図1で選択されている<div>要素であることも分かった。
そのため、これ以外の3つの<div>要素を強制的に削除してやれば、PIPが可能になるはずである。
<div class="tw-overlay tw-stream-movie-layout__splash">だけ消せばいいことに気付いた。
JavaScriptを用いて要素を削除する
要素を削除するには、開発者ツールで削除対象の要素を右クリックしてDelete elementを選択すればよい。
･･･のだが、いちいち消すのは面倒である。
ということで、JavaScriptを用いて削除することにした。
以下がそのコードである。削除するだけなので1行に収まった。
document.getElementsByClassName("tw-stream-movie-layout__splash")[0].remove()
さらにこれをブックマークレットにしてみた。といっても上のコードをjavascript:(function(){ここ})();に入れただけである。
javascript:(function(){document.getElementsByClassName("tw-stream-movie-layout__splash")[0].remove()})();
結果
できた。
Vivaldiでは、要素削除後に動画部分にカーソルを合わせるとPIPのマークが出るため、それをクリックしてやれば図4のようにPIP表示できる。
注意
たまに動画がカクつくことがある(通信環境の問題かもしれないが)。
最大の注意点
作業が手につかない。
やってたはずのAtCoderはAB問題だけ解いてやめてしまった。
