【TVer】サムネイルと動画プレーヤーを角丸にするCSS

この記事では、民放テレビ配信サービス「TVer(ティーバー)」の動画プレーヤーとサムネイルを角丸にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を使います。
本記事で紹介するCSSを使えば、「TVer(ティーバー)」の動画の四隅を、任意の角丸具合に変更できます。
通常は、以下のようになっていて、カクカクです。僕は、角丸が好きなので、カクカクを排除することにしました。サムネイルは、元々角丸ですが、もっと角丸にできます。

「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
角丸にするCSS
「TVer(ティーバー)」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*動画プレーヤーを角丸化*/
video-js[aria-label="Video Player"],
div[aria-label="Video Player"] {
border-radius: 10px !important;
}
/*サムネイルの角丸化*/
img[class*="thumbnail-img"] {
border-radius: 10px !important;
}
僕は、普段「TVer」を利用しないので、いつの間にかコードが使えなくなっていても、気づかない可能性が高いです。もし使えなくなっていた場合は、お手数ですが、問い合わせより連絡いただければ幸いです。
下記画像のようになればOKです。「border-radius」が角丸を意味しています。ここの数値を大きくすることで、より角丸になります。上記CSSの「10px」のままでも、結構な角丸になると思います。動画プレーヤーとサムネイルの角丸を別々にすることも可能です。
書き込めたら、右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:tver.jp)がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、動画プレーヤーが指定した角丸サイズになります。柔らかい印象になっていい感じです。ただし、動画の端っこが、その分見切れるので、角丸のしすぎには注意です。

サイドバーにある関連動画などのサムネイルは、元々角丸ですが、CSSを使って、より角丸にしています。デフォルトでは、「4px」になっていました。

一時的に無効化したい場合は、Stylebot→「tver.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、民放テレビ配信サービス「TVer(ティーバー)」で、動画プレーヤー・及びサムネイルを角丸にするCSSでした。
実を言うと、僕はテレビを見ないので、あまり恩恵がありません。本日(2022年12月18日)、M-1グランプリ 2022年があるので、そのためだけに「TVer」を開いています。