Amazon Prime ビデオのコントロール表示やシークバーなどをカスタマイズするユーザ CSS

前回、Netflix の再生画面が小さくワイプ表示されないようにするユーザ CSS を紹介した。

今回は、Netflix の競合サービスである「Amazon Prime Video アマゾン・プライム・ビデオ」の再生画面をカスタマイズする CSS を自作したので紹介する。

自分は Windows Chrome に、Stylish 拡張機能を導入して検証した。

目次

再生画面にカーソルを乗せた時、画面が薄暗くならないようにする

Amazon プライム・ビデオは、再生画面にカーソルを乗せると、画面全体が薄暗くなり、画面中央に再生ボタンなどがオーバーレイ表示される。

まずはこの、「画面全体が薄暗くなる」のを回避する CSS。

/* オーバーレイをなくす */
.gradientOverlay,
.pausedOverlay {
  background: transparent !important;
}

再生ボタン・秒数移動ボタンなどを画面端に配置する

前述のとおり、Amazon プライム・ビデオは再生ボタンなどが画面の中央に表示される。コレがちょっと鬱陶しいので、ブラウザの画面左上に配置するようにしてみる。

/* 再生・移動ボタン */
.buttons {
  position: absolute;
  top: 0;
  left: 0;
}

コレで作品の画面上に重なる要素がなくなった。

「次のタイトル」を非表示にする

作品のエンディングに差し掛かると、画面右下に出てくる「次のタイトル」の表示を消す

/* 次のタイトル */
.nextUpWrapper,
.nextUpContents {
  display: none;
}

シークバーのサムネイルを小さくする

シークバーにカーソルを乗せると表示されるサムネイルと、再生時間を小さめにする。

/* シークバーのサムネイル */
.trickplayImage {
  min-width: 100px !important;
  width: 100px !important;
}

/* シークバーの再生時間 */
.trickplayTime {
  font-size: .75vw !important;
}

以上

Amazon プライム・ビデオも (広義の) HTML5 で作られているので、このように CSS で色々いじったりできる。動画が観やすくなって良き良き。