YouTube の概要欄をピクチャインピクチャで浮かせる【全体】

前回「YouTube の歌枠のセトリコメントを別ウインドウで浮かせる」の記事で、選択したコメントをピクチャインピクチャで開くブックマークレットの作成方法をご紹介しました、例えば歌枠の動画でコメント欄に「この時間からこの歌を歌っているよ」というセトリコメントをしてくれているユーザーが居る場合もますよね、このセトリコメントのタイムスタンプ（青色の時間）をクリックすると動画のその位置まで移動する事ができて凄くありがたいのですが、コメントをピクチャインピクチャで開くことで他の作業をしながらいつでもタイムスタンプを利用できて更に便利になります、ただセトリって配信者が概要欄に書いてくれている場合もあるんですよね、そして既に概要欄にセトリが書いてあるからとセトリコメントはされていない場合が多いです、その状態だと前回の選択したコメントをピクチャインピクチャで浮かせるブックマークレットは使えません、という事で今回はユーチューブの動画の概要欄をピクチャインピクチャで浮かせるブックマークレットを作成してみましょう。

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

「ブックマークを編集」が開いたらまず「名前」を入力してください、こちらがブックマークバーに表示される名前になるので分かりやすい名前が良いですね。

次はその下の「URL」の項目ですが、こちらには下記のコマンドをコピーして「URL」のボックスに貼り付けましょう、貼り付けたら「保存」のボタンをクリックしてブックマークレットの作成完了です。

javascript:(async()=>{const s=['#description-inline-expander','#description-inner','ytd-text-inline-expander','#description'],t=s.map(e=>document.querySelector(e)).find(e=>e&&e.innerText.length>50);if(!t){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);d.body.appendChild(t.cloneNode(true));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)}}}})})()