この記事は、PCでYouTube動画を見ながらコメントも見る方法について書いています。
スマートフォンだと動画が固定された状態でコメント見れるんですよね。
でもPCでは見れない。
かといってブラウザ2つ並べてURLコピペして…ってのも面倒!
ということで、動画を固定するブックマークレットを作りました。
PCでYouTube動画を見ながらコメントも見る方法

YouTube動画を見ながらコメントも見る方法です。
- ①以下で紹介するブックマークレットをブックマークバー(お気に入りバー)に追加
- ②YouTubeを開いて、ブックマークレットをクリック
ブックマークレットというのは、ブックマーク機能を使って、JavaScriptを実行できたりするやつです。
詳しくは以下の記事で解説していますので、詳しく知りたい方はこちら参考にしてください。
→ 【効率化】Bookmarklet(ブックマークレット)の作り方
ブックマークレットをブックマークバー(お気に入りバー)に追加

以下のボタンをブックマークバーにドラッグ&ドロップして追加してください。
ブックマークバーが表示されていない場合は、「ctrl」+「shift」+「B」で表示させることができます。
YouTubeを開いて、ブックマークレットをクリック

ブックマックレートを追加できたら、YouTubeを開いている時にクリックするだけです。
クリックすると、YouTubeの動画が固定されて、コメントやサイドのコンテンツのみがスクロールされるようになります。

ブラウザの右下に「TOPへ」ボタンもつけてます。
概要欄に戻りたいとかいうときに使ってください。まあ「home」押せばいいんですけどね。
YouTube動画の固定を解除
再度、ブックマークレットをクリックしてください。
動画の固定が解除され、右下の「TOPへ」ボタンも表示されなくなります。
コードについて
こんな感じで書いてます。
javascript: (function () {
try {
const title = document.querySelector("title");
const primary = document.getElementById("primary-inner");
const player = document.getElementById("player-container-outer");
const columns = document.getElementById("columns");
const el = document.createElement("a");
el.href = "#";
el.textContent = "TOPへ";
el.style.position = "fixed";
el.style.right = "0";
el.style.bottom = "0";
el.style.display = "inline-block";
el.style.opacity = "0";
el.style.visibility = "hidden";
el.style.padding = "20px";
el.style.background = "#aaa";
el.style.color = "#fff";
el.style.fontSize = "12px";
el.style.fontWeight = "700";
el.style.textDecoration = "none";
el.style.zIndex = "700";
el.classList.add("toTop");
columns.appendChild(el);
let toTopBtn = document.getElementsByClassName("toTop")[0];
toTopBtn.addEventListener("click", function (e) {
window.scroll({
top: 0,
behavior: "smooth",
});
e.preventDefault();
});
function release() {
primary.style.paddingTop = "0px";
player.style.position = "relative";
player.style.top = "0px";
player.style.width = "auto";
player.style.boxShadow = "none";
player.classList.remove("fixed");
toTopBtn.style.opacity = "0";
toTopBtn.style.visibility = "hidden";
}
function set() {
setTimeout(function () {
let playerHeight = player.clientHeight;
let primaryWidth = primary.clientWidth;
primary.style.paddingTop = playerHeight + "px";
player.style.position = "fixed";
player.style.top = "80px";
player.style.width = primaryWidth + "px";
player.style.boxShadow = "0 0 20px #777";
player.style.zIndex = "500";
player.classList.add("fixed");
toTopBtn.style.opacity = "1";
toTopBtn.style.visibility = "visible";
}, 300);
}
function fixedToggle() {
if (player.classList.contains("fixed")) {
release();
} else {
set();
}
}
fixedToggle();
window.addEventListener(
"resize",
function () {
if (player.classList.contains("fixed")) {
set();
}
},
false
);
const config = { childList: true, characterData: true };
function callback(mutationsList, observer) {
for (const mutation of mutationsList) {
if (player.classList.contains("fixed")) {
set();
}
}
}
const observer = new MutationObserver(callback);
observer.observe(title, config);
} catch {}
})();
もともと自分用に使ってたのですが、ちょっと整えて今回記事にしてみました。
不具合があったり、「もっとこう書いた方がいいよ!」とかあれば、TwitterのDMかお問い合わせからご連絡いただけると嬉しいです。
YouTubeを便利にしてくれるChrome拡張機能「Enhancer for YouTube」

ちなみに、Chrome拡張機能で「Enhancer for YouTube」というのがあります。
こちら、YouTubeを便利に使えるように様々な機能を提供してくれています。

評価も高いですね!
↑の誰が作ったかよくわからないコードは気持ち悪い!という方はこちらの拡張機能を調べてみてください。
Enhancer for YouTubeの便利な機能をちょっとだけ紹介
こんな機能があります。(一部紹介)
- 動画の速度を変えられる
- 音量ブースト機能あり
- 広告カットできる
- 指定した箇所のループができる
なかなか便利そうですね。
以下のサイトを参考にさせていただきました。
→ 【もうこれなしでYouTubeは見れない】Chromeの拡張機能「Enhancer for YouTube」を使ってみたら便利過ぎた
ということで、PCでYouTube動画を見ながらコメントも見る方法のご紹介でした。