YouTubeのカーソルが消える原因はCSS｜拡張機能で解決

カーソルが消える原因——CSSのcursor: none
1. DevToolsでcursor: noneを自分の目で確認する
【方法1】Stylus——CSSを上書きするだけの最もシンプルな方法
【方法2】Tampermonkey——JavaScriptで監視するより確実な方法
StylusとTampermonkey、どっちを使えばいい？
応用——他のサイトでも使えるCSS上書きテクニック
1. 他の動画サイトのカーソル消失にも
2. 「このサイトの○○が気になる」もCSSで解決できるかも
注意点とトラブルシューティング
まとめ

YouTubeで動画を再生しているとき、マウスカーソルが突然消えて困ったことはありませんか？

結論から言うと、これはCSSのcursor: noneが原因です。Chrome拡張機能「Stylus」でCSSを1行上書きすれば、5分で解決できます。

この記事では、カーソルが消える原因の確認方法から、2つの解決策（Stylus・Tampermonkey）の設定手順までを、スクリーンショット付きで解説します。プログラミングの知識は不要です。

カーソルが消える原因——CSSのcursor: none

YouTubeのカーソル消失は、バグでも故障でもありません。YouTubeが意図的にCSSで消しています。

動画視聴に集中できるよう、約3秒マウスを動かさないとカーソルとコントロールバー（シークバーや再生ボタン）を自動で非表示にする設計です。映画館のような没入感を演出する機能ですが、作業しながら動画を流しているときにはストレスになります。

この挙動はYouTubeだけでなく、Netflix、Amazon Prime Video、Disney+など主要な動画配信サービスでも採用されています。

では、実際にブラウザのDevToolsで原因を確認してみましょう。

DevToolsでcursor: noneを自分の目で確認する

YouTubeで何か動画を再生する
動画の上にマウスを置いたまま数秒待ち、カーソルが消えたのを確認する
キーボードのF12キーを押す（Macの場合はCmd + Option + I）
画面右側に「DevTools（開発者ツール）」が開く
上部のタブで「Elements」が選択されていることを確認する
動画プレーヤーの要素をクリックすると、右側のスタイル欄にcursor: noneと表示されている

DevToolsでcursor: noneが表示されている画面

これがカーソルが消える正体です。試しにDevToolsのスタイル欄でcursor: noneの横にあるチェックボックスを外してみてください。一瞬でカーソルが復活します。つまり、この1行を無効化すれば解決です。

cursor: noneのチェックを外してカーソルが復活した状態

原因がわかったところで、CSSを上書きする具体的な方法を2つ紹介します。

【方法1】Stylus——CSSを上書きするだけの最もシンプルな方法

カーソル問題を解決するだけなら、Chrome拡張機能「Stylus」がいちばん手軽です。

CSSを3行書くだけで完了し、ブラウザへの負荷もほとんどありません。世界中で1000万人以上が利用している定番ツールです。

かつて人気だった「Stylish」が閲覧履歴を外部送信していた問題を受け、その安全な代替として開発された経緯があり、プライバシー面でも安心して使えます。

以下、設定手順を順番に説明します。

ステップ1：Stylusをインストールする

以下のリンクからChromeウェブストアを開き、「Chromeに追加」→「拡張機能を追加」をクリックします。

Stylus – Chrome ウェブストア

ステップ2：ツールバーにピン留めする

インストールが完了したら、ブラウザ右上のパズルピースアイコン（拡張機能メニュー）を開き、Stylusの横にあるピンアイコンをクリックしてツールバーに固定しておきましょう。ツールバーに「S」のアイコンが表示されればOKです。

ステップ3：YouTubeを開いてStylusのエディターを起動する

まずYouTube（https://www.youtube.com/）を開きます。次にツールバーのStylusアイコン（Sマーク）をクリックし、「次のスタイルを書く」の下に表示される「youtube.com」をクリックしてください。

ステップ4：CSSコードを入力して保存する

スタイルエディターが開いたら、左側のコード入力欄に以下の3行をコピー＆ペーストしてください。

*, *::before, *::after {
  cursor: auto !important;
}

*, *::before, *::after {

cursor: auto !important;

}

左上のテキストボックスに「YouTube カーソル表示固定」などわかりやすい名前を付け、「保存」をクリックします。

これで設定完了です。YouTubeに戻って動画を再生してみてください。マウスを動かさなくても、カーソルが消えなくなっているはずです。

なぜこの3行で解決するのか——!importantの仕組み

「仕組みはいいから使えればOK」という方は読み飛ばして大丈夫です。

この3行が効くのは、!importantがCSSの優先順位を強制的に最上位にするからです。

CSSには「あとから適用されたスタイルが優先される」というルールがあります。通常ならYouTubeが後から設定するcursor: noneが勝ってしまいます。しかし!importantを付けると、他のどんなスタイルよりも優先されます。

*, *::before, *::after {
  cursor: auto !important;
}

*, *::before, *::after {

cursor: auto !important;

}

*（アスタリスク）は「すべての要素」を指すセレクターです。::beforeと::afterも含めることで、疑似要素まで漏れなくカバーしています。cursor: autoは「カーソルをブラウザの初期状態に戻す」という意味です。

つまり「YouTubeのすべての要素に対して、どんな場合でもカーソルを初期状態にする」という指示になります。YouTubeがどのタイミングでcursor: noneを適用しても、!important付きのcursor: autoが常に勝つわけです。

コントロールバーも常に表示したい場合

カーソルだけでなく、シークバーや再生ボタンも常に表示しておきたい方は、先ほどのCSSに以下を追加してください。

.ytp-autohide .ytp-chrome-bottom {
  opacity: 1 !important;
}
.ytp-autohide .ytp-gradient-bottom {
  opacity: 1 !important;
}

.ytp-autohide .ytp-chrome-bottom {

opacity: 1 !important;

}

.ytp-autohide .ytp-gradient-bottom {

opacity: 1 !important;

}

YouTubeはカーソルを消すと同時に、コントロールバーを透明（opacity: 0）にしています。これをopacity: 1（完全に不透明）で上書きすると、コントロールバーが常に表示されたままになります。

オン・オフを切り替える方法

「やっぱり映画を見るときはカーソルを消したい」という場面もあるでしょう。Stylusなら簡単に切り替えられます。

ツールバーのStylusアイコンをクリックすると、現在のページに適用中のスタイル一覧が表示されます。スタイル名の左にあるチェックボックスでオン・オフを切り替えるだけ。映画をじっくり見たいときはオフに、作業中はオンに——と使い分けましょう。

【方法2】Tampermonkey——JavaScriptで監視するより確実な方法

CSSの上書きで稀に「一瞬カーソルが消えてから戻る」場合は、Tampermonkeyを使うとより確実です。

Stylusとの違いは、CSSだけでなくJavaScript（プログラム）も追加できる点です。YouTubeがJavaScriptでスタイルを動的に上書きするケースにも対応でき、カーソルが消える瞬間を検知して即座に元に戻すことができます。

Tampermonkeyも世界中で1000万人以上が利用している定番の拡張機能で、Chrome、Edge、Firefox、Safariに対応しています。

ステップ1：Tampermonkeyをインストールする

以下のリンクから「Chromeに追加」→「拡張機能を追加」でインストールします。

Tampermonkey – Chrome ウェブストア

ステップ2：デベロッパーモードを有効にする（重要）

2024年以降のChromeでは、Tampermonkeyを正常に動作させるためにこの設定が必要です。

Chromeのアドレスバーに chrome://extensions/ と入力してEnterキーを押す
画面右上の「デベロッパーモード」のトグルスイッチをオンにする
Tampermonkeyの「詳細」をクリックし、「ユーザースクリプトへのアクセスを許可」がオンになっていることを確認する

ツールバーにもピン留めしておきましょう。

ステップ3：新しいスクリプトを作成する

ツールバーのTampermonkeyアイコンをクリックし、「新規スクリプトを追加」を選択します。

ステップ4：コードを貼り付けて保存する

エディターに表示されるテンプレートをすべて削除し、以下のコードをまるごとコピー＆ペーストしてください。

// ==UserScript==
// @name         YouTube カーソル非表示を防止
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  YouTubeの動画再生中にマウスカーソルが消えるのを防止します
// @match        *://www.youtube.com/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ① CSSでcursor: noneを上書き
    const style = document.createElement('style');
    style.textContent = `
        *, *::before, *::after {
            cursor: auto !important;
        }
    `;
    document.documentElement.appendChild(style);

    // ② YouTubeがcursorスタイルを変更するのを監視して元に戻す
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                const target = mutation.target;
                if (target.style.cursor === 'none') {
                    target.style.cursor = 'auto';
                }
            }
        });
    });

    // ページ読み込み後に監視を開始
    window.addEventListener('DOMContentLoaded', function() {
        const player = document.querySelector('.html5-video-player');
        if (player) {
            observer.observe(player, {
                attributes: true,
                attributeFilter: ['style'],
                subtree: true
            });
        }
    });
})();

// ==UserScript==

// @name YouTube カーソル非表示を防止

// @namespace http://tampermonkey.net/

// @version 1.0

// @description YouTubeの動画再生中にマウスカーソルが消えるのを防止します

// @match *://www.youtube.com/*

// @run-at document-start

// @grant none

// ==/UserScript==

(function() {

'use strict';

// ① CSSでcursor: noneを上書き

const style = document.createElement('style');

style.textContent = `

*, *::before, *::after {

cursor: auto !important;

}

document.documentElement.appendChild(style);

// ② YouTubeがcursorスタイルを変更するのを監視して元に戻す

const observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

if (mutation.type === 'attributes' && mutation.attributeName === 'style') {

const target = mutation.target;

if (target.style.cursor === 'none') {

target.style.cursor = 'auto';

}

});

// ページ読み込み後に監視を開始

window.addEventListener('DOMContentLoaded', function() {

const player = document.querySelector('.html5-video-player');

if (player) {

observer.observe(player, {

attributes: true,

attributeFilter: ['style'],

subtree: true

});

}

});

})();

Ctrl + S（MacはCmd + S）で保存します。

これで設定完了です。YouTubeを開いてTampermonkeyのアイコンに「1」と数字が表示されていれば、スクリプトが正常に動いています。

このスクリプトの仕組み（読み飛ばしOK）

CSS上書きとJavaScript監視の2段構えで、カーソル消失を確実に防いでいます。

①の部分はStylusと同じ仕組みです。CSSのcursor: auto !importantでカーソル非表示を上書きしています。

②の部分がTampermonkeyならではの仕組みです。MutationObserverというブラウザの機能を使って、動画プレーヤーのスタイルが変更される瞬間を監視しています。YouTubeがcursor: noneを設定した瞬間に検知して、すぐにcursor: autoに書き戻します。

①のCSS上書きだけで大半のケースは解決しますが、YouTubeのJavaScriptがCSSの後からスタイルを上書きするケースにも②で対応できるため、より確実に動作します。

スクリプトの管理方法

Tampermonkeyアイコン→「ダッシュボード」で、スクリプトのオン・オフ切り替え、編集、削除ができます。不要になったらゴミ箱アイコンで削除するだけです。

StylusとTampermonkey、どっちを使えばいい？

迷ったらStylusを選んでください。カーソル問題を解決するだけなら、これで十分です。

Stylusは設定が簡単で動作も軽く、CSSを3行書くだけで完了します。一方Tampermonkeyは、CSSの上書きでは対応できないケースや、YouTube以外のカスタマイズもやりたい場合に力を発揮します。

	Stylus	Tampermonkey
手軽さ	CSSを3行書くだけ	コードをコピペ + デベロッパーモード設定
確実性	ほとんどの場合はこれで十分	CSS上書き + JavaScript監視の2段構えでより確実
動作の軽さ	非常に軽い	軽い（ほぼ変わらない）
応用範囲	CSSの変更のみ	CSS + JavaScriptで何でもできる
こんな人向け	カーソル問題だけ解決したい	他のカスタマイズもやってみたい