☰

YouTube Pinned Video & Scrolling Comments Layout

Nov. 10/15 (needs updating) Modernizes 1080p layout, when scrolling downward it pins the YouTube video to the left-side page, allowing you to watch the video while also providing the ability to scroll/read through comments on the right-side.

当前为 2015-11-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name YouTube Pinned Video & Scrolling Comments Layout
  3. // @namespace YFVP3
  4. // @description Nov. 10/15 (needs updating) Modernizes 1080p layout, when scrolling downward it pins the YouTube video to the left-side page, allowing you to watch the video while also providing the ability to scroll/read through comments on the right-side.
  5. // @version 14.25.15.0247
  6. // @include http://*youtube.com/*v=*
  7. // @include https://*youtube.com/*v=*
  8. // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  9. // @author  drhouse
  10. // @locale  en
  11. // @icon    https://s.ytimg.com/yts/img/favicon-vfldLzJxy.ico
  12. // ==/UserScript==
  13.  
  14. var player = document.getElementById('player')
  15. , content = document.getElementById('watch7-content')
  16. , sideWatch = document.getElementById('watch7-sidebar-contents')
  17. , footer = document.getElementById('footer-container')
  18. , playerRect = player.getBoundingClientRect()
  19.  
  20. $(document).ready(function () {
  21.     var button = document.createElement("button");
  22.     button.setAttribute("id", "SideButton");
  23.     
  24.     button.setAttribute("class","yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip");
  25.     button.setAttribute("aria-pressed", "false");
  26.     button.setAttribute("role","button");
  27.     button.setAttribute("type","button");
  28.     button.setAttribute("title","SideButton");
  29.     
  30.     var spant = document.createElement("span");
  31.     spant.setAttribute("class","yt-uix-button-content");
  32.     spant.innerHTML="Toggle";
  33.     
  34.     button.appendChild(spant);
  35.     content.style.display = "block";
  36.     
  37.     document.getElementById('appbar-guide-button-container').appendChild(button);
  38.     document.getElementById('SideButton').addEventListener('click', function() { toggle_visibility(content); }, false);
  39.     
  40.     function toggle_visibility(e){
  41.         if(e.style.display == 'block')
  42.             e.style.display = 'none';
  43.         else
  44.             e.style.display = 'block';
  45.     }
  46.     
  47. });
  48.  
  49. footer.style.visibility = 'hidden'
  50.  
  51. window.onload = function(e) {
  52.     player.style.position = 'fixed'
  53.     player.style.top = '0px'
  54.     player.style.right = '750px'
  55.     player.style.zIndex = 997
  56.     
  57.     content.style.position = 'relative'
  58.     content.style.zIndex = 998
  59.     content.style.top = '0px'
  60.     content.style.width = '650px'
  61.     content.style.left = '755px'
  62.     
  63.     sideWatch.style.zIndex = 999
  64.     
  65. }
  66.  
  67. window.onscroll = function(e) {
  68.     
  69.     if(window.pageYOffset >= playerRect.top && window.pageYOffset > 0) {
  70.         player.style.position = 'fixed'
  71.         player.style.top = '0px'
  72.         player.style.right = '750px'
  73.         player.style.zIndex = 997
  74.                 
  75.         content.style.position = 'relative'
  76.         content.style.zIndex = 998
  77.         content.style.top = '80px'
  78.         content.style.width = '650px'
  79.         content.style.left = '755px'
  80.         
  81.         sideWatch.style.zIndex = 999
  82.         
  83.     } else {
  84.         
  85.         player.style.position = ''
  86.         player.style.top = ''
  87.         
  88.         sideWatch.style.position = ''
  89.         sideWatch.style.top = ''
  90.         
  91.         content.style.position = ''
  92.         content.style.top = ''
  93.     }
  94. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址