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 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==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 = ''
    }
}