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 提交的版本，查看最新版本。

安装此脚本？

提问、发表评价或者举报此脚本。

换行

// ==UserScript==
// @name YouTube Pinned Video & Scrolling Comments Layout
// @namespace YFVP3
// @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.
// @version 14.25.15.0247
// @include http://*youtube.com/*v=*
// @include https://*youtube.com/*v=*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @author  drhouse
// @locale  en
// @icon    https://s.ytimg.com/yts/img/favicon-vfldLzJxy.ico
// ==/UserScript==

var player = document.getElementById('player')
, content = document.getElementById('watch7-content')
, sideWatch = document.getElementById('watch7-sidebar-contents')
, footer = document.getElementById('footer-container')
, playerRect = player.getBoundingClientRect()

$(document).ready(function () {
    var button = document.createElement("button");
    button.setAttribute("id", "SideButton");
    
    button.setAttribute("class","yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip");
    button.setAttribute("aria-pressed", "false");
    button.setAttribute("role","button");
    button.setAttribute("type","button");
    button.setAttribute("title","SideButton");
    
    var spant = document.createElement("span");
    spant.setAttribute("class","yt-uix-button-content");
    spant.innerHTML="Toggle";
    
    button.appendChild(spant);
    content.style.display = "block";
    
    document.getElementById('appbar-guide-button-container').appendChild(button);
    document.getElementById('SideButton').addEventListener('click', function() { toggle_visibility(content); }, false);
    
    function toggle_visibility(e){
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
    
});

footer.style.visibility = 'hidden'

window.onload = function(e) {
    player.style.position = 'fixed'
    player.style.top = '0px'
    player.style.right = '750px'
    player.style.zIndex = 997
    
    content.style.position = 'relative'
    content.style.zIndex = 998
    content.style.top = '0px'
    content.style.width = '650px'
    content.style.left = '755px'
    
    sideWatch.style.zIndex = 999
    
}

window.onscroll = function(e) {
    
    if(window.pageYOffset >= playerRect.top && window.pageYOffset > 0) {
        player.style.position = 'fixed'
        player.style.top = '0px'
        player.style.right = '750px'
        player.style.zIndex = 997
                
        content.style.position = 'relative'
        content.style.zIndex = 998
        content.style.top = '80px'
        content.style.width = '650px'
        content.style.left = '755px'
        
        sideWatch.style.zIndex = 999
        
    } else {
        
        player.style.position = ''
        player.style.top = ''
        
        sideWatch.style.position = ''
        sideWatch.style.top = ''
        
        content.style.position = ''
        content.style.top = ''
    }
}

欢迎访问Greasy Fork镜像