YouTube Pinned Video & Scrolling Comments Layout

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-04-07 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name YouTube Pinned Video & Scrolling Comments Layout
// @namespace YFVP3
// @description 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.14.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
// ==/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 = ''
    }
}