YouTube の概要欄をピクチャインピクチャで浮かせる【選択範囲】

前回の「YouTube の概要欄をピクチャインピクチャで浮かせる【全体】」の記事ではユーチューブの動画ページの概要欄全体を浮かせるブックマークレットの作成方法をご紹介しましたが、概要欄をすべて浮かせる必要は無いから選択した一部だけで良い！という場合も多いですよね、という事でこちらの記事では概要欄の選択した箇所だけを PIP で浮かせるブックマークレットの作成方法をご紹介してみたいと思います、手順としてはまずブックマークバーにブックマークレット（ブックマークを利用した簡単なプログラム）を作成します、次に概要欄をピクチャインピクチャで開きたいユーチューブの動画のページを開き、あとは概要欄のピクチャインピクチャで開きたい箇所をマウスのドラッグで選択してブックマークバーに作成したブックマークレットをクリックするだけですね、これでマウスで選択した（青く反転した）箇所だけがピクチャインピクチャで開くのですが、こちらのリンクやタイムスタンプをクリックしてみたら問題なく動作しましたので、他の作業をしながらわざわざ動画のページを開かなくてもピクチャインピクチャのタイムスタンプを利用して目的のシーンまで飛んだりする事ができるようになるんですよね、ちなみに今回はブラウザの Chrome を使って作成しています。

では概要欄の一部をピクチャインピクチャで開くブックマークレットを作成してみましょう、まずはブックマークバーを右クリックしてメニューから「ページを追加」を選択してください、ブックマークバーはアドレスバーの下に表示されていますがもし見当たらない場合は「Ctrl + Shift + B」のキーボードショートカットで表示と非表示を切り替えることができます。

「ブックマークを編集」が開いたらまずは「名前」を入力しましょう、ここで付けた名前がブックマークバーに表示されるので分かりやすい名前が良いですね、前回は「概要欄 PIP(全)」だったので今回は名前の最期を(選択)に変更してみます。

次に「URL」のボックスですがこちらには下記のコードをコピーして貼り付けちゃってください、コードを貼り付けたら「保存」ボタンをクリックすれば。

javascript:(async()=>{const s=window.getSelection();if(!s.rangeCount||s.toString().trim()===''){alert('浮かせたい概要欄のテキストをマウスでドラッグして選択してから実行してください。');return;}const pip=await documentPictureInPicture.requestWindow({width:400,height:550}),d=pip.document;d.body.style.cssText='margin:0;padding:20px;background:#0f0f0f;color:#f1f1f1;font-family:Roboto,Arial,sans-serif;white-space:pre-wrap;';const st=d.createElement('style');st.textContent='*{color:#f1f1f1!important;} a{color:#3ea6ff!important;text-decoration:none!important;cursor:pointer!important;} a:hover{text-decoration:underline!important;}';d.head.appendChild(st);const div=d.createElement('div');div.appendChild(s.getRangeAt(0).cloneContents());d.body.appendChild(div);d.querySelectorAll('a').forEach(a=>{const u=new URL(a.href,window.location.href);if(u.searchParams.has('t')){const t=u.searchParams.get('t');a.removeAttribute('href');a.onclick=()=>{const v=window.document.querySelector('video');if(v){const m=t.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);v.currentTime=(parseInt(m[1]||0)*3600)+(parseInt(m[2]||0)*60)+parseInt(m[3]||0)}}}})})()

ブックマークバーに概要欄の一部をピクチャインピクチャで開くブックマークレットを作成することができました。

使い方は PIP で浮かせたい概要欄の一部をマウスのドラッグで選択するだけです、まずカーソルを選択したい概要欄の最初か最期の文字の場所に移動して、次にマウスの左ボタンを押したまま選択したい文字の上をカーソルでなぞってください、すると上の画像のようにカーソルでなぞった文字が青く反転した状態になりますがこちらが選択された状態ですね。