【YouTube Fast Forward】動画内に10秒戻し・進みボタンを追加する拡張機能

2024年6月29日2024年12月26日YouTube関連

この記事では、PCウェブサイト版「YouTube」の動画プレーヤー内（コントロールバー）に10秒戻し・進みのスキップボタンを追加してくれるChrome拡張機能「YouTube Fast Forward」について書きます。

【YouTube Fast Forward】動画内に10秒戻し・進みボタンを追加する拡張機能

本拡張機能を導入すると、PCウェブサイト版「YouTube」のシークバー下部にあるボタンたちに新しく10秒戻し・進みボタンを設置してくれます。クリックするとその分動画が飛ばされます。

「YouTube Fast Forward」拡張機能を導入したYouTubeのスクリーンショット

現状キーボードのJやLキーでもスキップできますが、キーではなくマウスで操作したい！ボタンを押す行為のほうが馴染んでいる！みたいな方には本拡張機能がいいかもしれません。

YouTubeで用意されているスキップキー
`J`	10秒戻し
`L`	10秒進み
`←`	5秒戻し
`→`	5秒進み

デフォルトでは10秒スキップですが、設定から任意の秒数（5秒や30秒スキップなど）に変更できます。本記事は拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。

リリース元：Repuddle（GitHub）
記事執筆時のバージョン：2.1（2024年06月13日）

1. インストール方法
2. 使い方
3. 【設定】飛ばす時間の調整
4. 【高度だけど追記】ボタンの位置を変える方法
5. 【余談】他のボタン追加記事紹介
6. 感想

インストール方法

Chromeウェブストアからインストールできます。本拡張機能はChrome拡張機能のみのリリースでFirefoxアドオンはありません。類似アドオンを軽く調べてみましたが、見つけられませんでした。

YouTube Fast Forward - Chrome Web Store

Customizable Buttons to Fast Forward/Backward videos on YouTube.

https://chromewebstore.google.com/detail/pknkmgaijamjmeeglhm...

「Chromeに追加」をクリックします。

「YouTube Fast Forward」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「YouTube Fast Forward」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。

「YouTube Fast Forward」拡張機能をインストールする手順画像3

使い方

本拡張機能をインストールした状態で「YouTube」にアクセスします。既に開いていた場合は、一度ページをリロードします。

適当に動画再生ページを開きます。試しに僕の「カロリーメイトを上手に開けられるかもしれない方法」動画を見てみます。

拡張機能導入後は、動画時間とチャプターの間にスキップボタンが追加されます。拡張機能なので標準の再生・一時停止、次の動画ボタンなどと比べると若干表示されるまでにラグがあるかもしれません。

他のボタンと同様、マウスを動画プレーヤーに乗せた時だけ表示されます。マウスを外に置くと自動的に非表示になります。シークバーと同じ挙動なので扱いやすいと思いました。

クリックするとその分動画を飛ばしてくれます。キーを押さなくてもマウスでポチポチ操作できます。

【設定】飛ばす時間の調整

拡張機能メニュー内にある「YouTube Fast Forward」をクリックすると設定ポップアップが表示されます。

「BACKWARD」が戻す時間、「FORWARD」が進む時間です。デフォルトでは10秒になっているので、変更したい場合半角数字で好きな時間を入力します。それぞれ個別に調整できます。

変更できたら「Save Changes」で保存します。YouTubeページを再読み込み（リロード）したら変更が反映されます。ちゃんとボタン内の数字も変わっていました。

「YouTube Fast Forward」拡張機能のスキップ秒数を5秒戻しと30秒進みにした画像

設定ポップアップ右下の「Show Links」を押すと、各種リンク（寄付やGitHub）ページに飛べます。

【高度だけど追記】ボタンの位置を変える方法

ウェブサイトにCSSを適用させる拡張機能を導入している場合、CSSを書き込むことでボタンの順番を強制的に変えられます。僕は何となく時間の右側に表示されるデフォルトの状態が気になりました。動画の進行時間より左にスキップボタンはあってほしい派です。

「Stylebot」や「Stylus」などCSSを適用できる拡張機能を導入している前提です。「何それ？」な方にとっていきなりはちょっと高度だと思います。まずそれらの拡張機能が何なのかから調べるのがいいと思います。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

以下のようなCSSになります。結構適当に作ったので不備がある可能性もあります。

CSS

/*【プレーヤー内ボタンの順番】再生ボタン*/
.ytp-chrome-controls button.ytp-play-button {
    order: 1 !important;
}

/*【プレーヤー内ボタンの順番】次の動画ボタン*/
.ytp-chrome-controls a.ytp-next-button {
    order: 2 !important;
}

/*【プレーヤー内ボタンの順番】「YouTube Fast Forward」拡張機能ボタン*/
.ytp-chrome-controls .ytp-button:has(>[style="margin:auto;padding-bottom:3px;"]) {
    order: 3 !important;
}

/*【プレーヤー内ボタンの順番】音量調整ボタン*/
.ytp-chrome-controls span.ytp-volume-area {
    order: 4 !important;
}

/*【プレーヤー内ボタンの順番】進行時間*/
.ytp-chrome-controls .ytp-time-display {
    order: 5 !important;
}

/*【プレーヤー内ボタンの順番】チャプター*/
.ytp-chrome-controls .ytp-chapter-container {
    order: 6 !important;
}