CGWORLD Online Tutorial の動画表示をブラウザを縮小しても見やすくする

Blender の勉強をしようと思い、CGWORLD Online Tutorial の初心者用のコースを購入しました。

ちょっとした問題

私は複数ディスプレイが苦手なので、一枚のディスプレイで作業しているのですが、チュートリアルの動画と Blender を横並びにする場合には、動画のブラウザを縮小する必要がでてきます。

すると上記のように、ブラウザの画面よりだいぶ小さく動画が出てきてしまいます。サイドバーあたりが、responsive にサイズに合わせて移動してくれたりするといいのですが、そうはなっていません。

動画閲覧時は動画にフォーカスできるようにした

最初は開発者ツールで、動画周りのスタイルをいじったりしていたのですが、チュートリアルの動画が切り替わるたびにやり直しになるのでストレスに。。
なので、動画閲覧時にだけ、動画にフォーカスするスタイルを restore するツールを探してみました。

Stylebot

GitHub - ankit/stylebot: Change the appearance of the web instantly

私は Edge を使っていますので、上記を使うことにしました。Stylebot は、簡単にフォントや各種サイズを変更できるのですが、それ以外にも直接 CSS を記述することもできます。
また、それをサイトごとに保存でき、かつ ON/OFF を容易に切り替えることが可能です。

利用する Style

#header {
  display: none;
}

main {
  width: 100%;
}

body > div.container {
  width: 100%;
  padding: 0px;
  margin: 0px;
}

body > div.container > div > main > div > section:nth-child(1) {
  padding: 0px;
}

特に凝ったことはしておらず、上記の画像のようになるように、

  • ヘッダの削除
  • 動画周りの margin/padding の削除
  • 動画を最大で表示できるように幅を調整

ぐらいしかしていません。

ON/OFF

上記のように、拡張機能のボタンで、対象のサイトの Stylebot の設定を適用するかどうかを ON/OFF できるので、動画閲覧時以外の CGWORLD Online Tutorial のサイトはスタイル OFF 状態で閲覧できます。