PC版（web版）のインスタグラムのサイトって動画のシークバーが出ないんですよね。
なんとなく気になると言うか、あとどれくらいで終わるのかがわからないとかが・・・なんか嫌。
ちょんちょんと早送り・巻き戻ししたくてもできないし。
んで、実は以前 uBlock origin で対策する方法を記事にしました。
でもそれからもう5年？弱も経っているので当然そのままでは動作しないと思う。
やり方は有効なはずなので工夫次第でなんとでもなるのですが、
せっかくなので現在使っているブックマークレットの方をシェアしようかと思います。
ログを見ていたらそのページにアクセスしている人もいるようなので。
備忘録も兼ねて記事化。
PC版Instagramに動画コントロールがない？
残念ながらPC ブラウザ（Web 版）では再生コントロールが表示されません。早送り・巻き戻しができず、地味に不便です。
かといって拡張機能を入れるほどでもない。
そもそもブラウザの機能でビデオコントローラーはあります。シークバーや音量調整なども表示できるのです。
要はそれを表に出そう、ユーザーがアクセスできるようにしようというお話です。
ビデオコントロールバーを表示するブックマークレット
ブックマークの URL欄 にそのままコピー＆ペーストして使います。
- ブックマークバーを右クリック →「ページを追加…」（または「ブックマークを追加」）
- 名前を入力（例：インスタ動画バー）
- URL欄に下記コードをコピペ
javascript:(()=>{const o=location.hostname.includes("instagram.com"),t=document.querySelectorAll("video");t.forEach(e=>e.controls=!e.controls),o&&(t.forEach(e=>{const c=getComputedStyle(e).objectFit;e.style.objectFit=c==="cover"?"contain":"cover"}),document.querySelectorAll("[data-instancekey]").forEach(e=>{e.style.display=e.style.display==="none"?"":"none"}))})();
あとはWeb版 Instagram で動画が表示されているページを開き、登録したブックマークレットをクリックするだけ。
動画の下部にコントロールバーが現れます。
もう一度押せば元に戻ります。
やっていることは単純で
- ページ内に読み込まれている videoタグ（動画）を探し
- コントロールバーの表示オン・オフを切り替えます
- さらに instagramのサイトだったら 動画の上に重ねられている邪魔な要素（UIレイヤー）を非表示にする、
- videoの
objectFitを全体が表示されるようcontainに切り替える（※1）
それだけです。
ちなみにインスタ以外のサイトでもvideoタグを使って表示していれば動きます。あまり使う機会はありませんが。
objectFit:cover が設定されているため全画面にすると上下が切れたりするのに対応しました（2026/08/23追記、コード更新）注意点
現在の時点（2026年3月）では問題なく動作しますが、時間が経てばインスタ側の構造変更により動かなくなることも予想できます。
その場合は [data-instancekey] の部分などを開発者ツールで確認し直す必要があります。
あと、公式にサポートされた使い方ではない、と言う点はご承知おきください。
まとめ
Web版インスタグラムの動画にコントロールバーを追加するブックマークレットを紹介してみました。
拡張機能不要・登録したらすぐ使えるので気になったら試してみてください。
何かのヒントにでもなれば幸いです。
では。
コメント