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

プログラミング

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

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

でもPCでは見れない。

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

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




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かお問い合わせからご連絡いただけると嬉しいです。

YouTubeを便利にしてくれるChrome拡張機能「Enhancer for YouTube」

ちなみに、Chrome拡張機能で「Enhancer for YouTube」というのがあります。

こちら、YouTubeを便利に使えるように様々な機能を提供してくれています。

評価も高いですね!

↑の誰が作ったかよくわからないコードは気持ち悪い!という方はこちらの拡張機能を調べてみてください。

Enhancer for YouTubeはこちら

Enhancer for YouTubeの便利な機能をちょっとだけ紹介

こんな機能があります。(一部紹介)

  • 動画の速度を変えられる
  • 音量ブースト機能あり
  • 広告カットできる
  • 指定した箇所のループができる

なかなか便利そうですね。

以下のサイトを参考にさせていただきました。

【もうこれなしでYouTubeは見れない】Chromeの拡張機能「Enhancer for YouTube」を使ってみたら便利過ぎた

ということで、PCでYouTube動画を見ながらコメントも見る方法のご紹介でした。