【CSSの解決策を教えて下さい】 ChromeでYoutube, Prime Videoにgrayscale(100%)を当てると全画面表示時に真っ白になります。

Question

現在Google Chromeの拡張機能で、特定のホームページをグレイスケールで表示する機能を作成しています。

CSSでbodyにfilter: grayscale(100%);を当てるため、以下のJSの記述をYoutube, Prime Videoに適用。

通常画面ではグレイスケールで表示されるのですが、全画面ボタンを押すと画面が真っ白になります。
（参考画像を添付しております。）

解決するためにCSSの適用箇所を変えたりしてみたのですがうまくいきません。

もし原因と対策をご存知の方がいらっしゃいましたら、アドバイスをいただけないでしょうか？

---

【コード】

var elem = document.body;
elem.style.filter = 'grayscale(100%)';

chrome.runtime.onMessage.addListener(function(msg) {
  var elem = document.body;
  elem.style.filter = msg.color;
});

---

【参考画像】

Answer 1

Stylusでユーザースタイルシートを作って試したところ、body要素ではなく、ytd-watch-flexy[fullscreen]に対してfilterをかけると、フルスクリーンでグレイスケール表示になりました。

ytd-watch-flexy[flexy_],
ytd-watch-flexy[theater],
ytd-watch-flexy[fullscreen] {
    filter: grayscale(100%);
}

Answer 2

ご回答いただき誠にありがとうございました。
ytd-watch-flexy[fullscreen]にfilterをかけてグレイスケールにすることができました。
大変勉強になりました。