Amazon Prime Video 再生中の邪魔なオーバーレイを消すCSS

再生中のPrime Videoの画面にマウス乗せると画面が暗くなるのをやめさせたかった。

以下のカスタムCSSで邪魔な要素を全部消せる。

/* グラデーションオーバーレイを消す */
div.webPlayerUIContainer > div > div > div > div > div:nth-child(1) {
    opacity: 0;
}

/* 再生・移動ボタンをなくす */
div.webPlayerUIContainer > div > div > div > div > div:nth-child(4) {
    opacity: 0;
}

/* next up */
div.webPlayerUIContainer > div > div > div > div > div:nth-child(5) > div:nth-child(3) > div:nth-child(2) > div {
    opacity: 0;
}

ちなみにnth-childが多用されている理由だが、Prime Videoでは一部を除いてまともなクラス名が使えず、ランダム文字列っぽい値となっている。さらにそのクラス名もちらほら変わる。そのためnth-childと子要素でセレクタを書くしかない（Pixivとかも同じ）。

※2022-12-07 PrimeVideo側のレイアウトが変わったのでCSSを修正した

関連記事

• アニメの更新チェックにDistill Web Monitorがおすすめですよって話
• Distill Web MonitorでAmazon Prime Videoの更新チェックがエラーになる
• Amazon Prime Video 再生中の邪魔なオーバーレイを消すCSS
• Amazon Prime Video の7031エラーを解決する方法