PCでYouTube動画を見ながらコメントも見る方法

プログラミング

2022/1/23 2022/1/25

この記事は、PCでYouTube動画を見ながらコメントも見る方法について書いています。

スマートフォンだと動画が固定された状態でコメント見れるんですよね。

でもPCでは見れない。

かといってブラウザ２つ並べてURLコピペして…ってのも面倒！

ということで、動画を固定するブックマークレットを作りました。

Contents

1 PCでYouTube動画を見ながらコメントも見る方法
2 YouTubeを便利にしてくれるChrome拡張機能「Enhancer for YouTube」

PCでYouTube動画を見ながらコメントも見る方法

YouTube動画を見ながらコメントも見る方法です。

①以下で紹介するブックマークレットをブックマークバー（お気に入りバー）に追加
②YouTubeを開いて、ブックマークレットをクリック

ブックマークレットというのは、ブックマーク機能を使って、JavaScriptを実行できたりするやつです。

詳しくは以下の記事で解説していますので、詳しく知りたい方はこちら参考にしてください。

→ 【効率化】Bookmarklet(ブックマークレット)の作り方

ブックマークレットをブックマークバー（お気に入りバー）に追加

以下のボタンをブックマークバーにドラッグ＆ドロップして追加してください。

fixed-youtube-player

ブックマークバーが表示されていない場合は、「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かお問い合わせからご連絡いただけると嬉しいです。