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. button.setAttribute("class","yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip");
  24. button.setAttribute("aria-pressed", "false");
  25. button.setAttribute("role","button");
  26. button.setAttribute("type","button");
  27. button.setAttribute("title","SideButton");
  28. var spant = document.createElement("span");
  29. spant.setAttribute("class","yt-uix-button-content");
  30. spant.innerHTML="Toggle";
  31. button.appendChild(spant);
  32. content.style.display = "block";
  33. document.getElementById('appbar-guide-button-container').appendChild(button);
  34. document.getElementById('SideButton').addEventListener('click', function() { toggle_visibility(content); }, false);
  35. function toggle_visibility(e){
  36. if(e.style.display == 'block')
  37. e.style.display = 'none';
  38. else
  39. e.style.display = 'block';
  40. }
  41. });
  42.  
  43. footer.style.visibility = 'hidden'
  44.  
  45. window.onload = function(e) {
  46. player.style.position = 'fixed'
  47. player.style.top = '0px'
  48. player.style.right = '750px'
  49. player.style.zIndex = 997
  50. content.style.position = 'relative'
  51. content.style.zIndex = 998
  52. content.style.top = '0px'
  53. content.style.width = '650px'
  54. content.style.left = '755px'
  55. sideWatch.style.zIndex = 999
  56. }
  57.  
  58. window.onscroll = function(e) {
  59. if(window.pageYOffset >= playerRect.top && window.pageYOffset > 0) {
  60. player.style.position = 'fixed'
  61. player.style.top = '0px'
  62. player.style.right = '750px'
  63. player.style.zIndex = 997
  64. content.style.position = 'relative'
  65. content.style.zIndex = 998
  66. content.style.top = '80px'
  67. content.style.width = '650px'
  68. content.style.left = '755px'
  69. sideWatch.style.zIndex = 999
  70. } else {
  71. player.style.position = ''
  72. player.style.top = ''
  73. sideWatch.style.position = ''
  74. sideWatch.style.top = ''
  75. content.style.position = ''
  76. content.style.top = ''
  77. }
  78. }

QingJ © 2025

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