Another way to optimize the Youtube interface

After reading a recent article on Youtube Center , I decided to share with the habrasoobshchestvo my own way of taming the plump interface of Youtube.




')
Youtube Center is certainly a good extension, but Youtube with it starts to slow down even more. I will offer you Stylish - this is an extension to add your own styles to any site, they have already written about it in habrahabr.

Firefox: addons.mozilla.org/en-US/firefox/addon/stylish
Chrome: chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
Safari: sobolev.us/stylish (thanks to simpel )

1. Youtube to watch the video

I will give styles that suit me simultaneously for monitors 1280x800 and 1920x1080. After using them, Youtube looks like this:



As you can see all the details of the interface are placed on one page. I removed the comments because I never saw the point in them, you can leave them. Actually the styles themselves:

/*  */ .player-width { width: 1210px !important; } .player-height { height: 640px !important; } /*    fullscreen */ [data-player-size="fullscreen"] .player-width { width: 100% !important; } [data-player-size="fullscreen"] .player-height { height: 100% !important; } /*    */ #guide { display: none; } #player, #watch7-main-container { padding-left: 30px !important; } /*    embed iframe */ #player.full-frame { padding-left: 0px !important; } /*     About/Share */ #watch-discussion { display: none; } #watch7-action-buttons, #watch7-action-panels { display: none; } /*  related videos */ .watch-wide #watch7-sidebar { margin-top: -642px !important; margin-left: 1240px !important; height: 620px !important; } .video-list-item { margin-bottom: 13px !important; } /*  footer */ #body-container { padding-bottom: 0 !important; } #footer-container { display: none; } 

I didn’t stop at that, the most delicious is farther

2. Youtube as an audio player

Perhaps you looked at this post, seeing the image in the header of the post and asking yourself “where did the video go?”, The second part of the topic is about that.

I mostly use Youtube to listen to music. Some time ago I even wrote a script for downloading a whole playlist in mp3 format . But this option is not suitable when it comes to one video (not a playlist).

If you cut the video and leave only the audio track, then you will reduce the resource consumption of the processor by two or three times:

Further actions are aimed at automating the rapid switching modes "with video" and "without video."

2.1. Enable html5

www.youtube.com/html5

2.2. Adding Styles to Stylish

 /*  */ .audio-only .player-width { width: 720px !important; } .audio-only .player-height { height: 40px !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only .watch-wide #watch7-sidebar { display: none; } 

As you can see, I use the prefix class .audio-only and the last step is to automate its addition.

2.3. UserScript to add .audio-only class

About UserScripts is already written enough , I think that you know what it is. We need a simple script that will catch pressing Alt+M and add / remove the class .audio-only:

 // ==UserScript== // @name Youtube audio-only switch // @description Toggle audio-only mode for saving cpu resources // @match http://www.youtube.com/* // ==/UserScript== document.body.onkeydown = function(event){ event = event || window.event; var keycode = event.charCode || event.keyCode; // Alt + M if(event.altKey && keycode == 77) { if(document.body.className.match(' audio-only')) document.body.className = document.body.className.replace(' audio-only', ''); else document.body.className += ' audio-only'; } } 

It would not be superfluous to remind you how to install a custom script (it should be named * .user.js):

• Firefox: greasemonkey
• Chrome: open chrome: // extensions / and drag the script there
• Safari: greasekit

I hope you were not bored in this topic :)

UPD. Feather beta

arty in the comments mentioned Feather Beta . Frankly, I did not know about this function, it is intended for exactly what I was doing in this topic - the reduction of optional interface elements.

I rewrote custom styles for the included Feather Beta:

 /*  */ #movie_player { width: 1260px !important; height: 580px !important; } #p { height: 580px !important; } /*    */ #mh, #ct { margin: 0 } #ft { display: none; } /*  sidebar */ #rc { margin-left: 1280px; margin-top: -690px; } /* === audio-only === */ /*  */ .audio-only #movie_player { width: 720px !important; height: 40px !important; } .audio-only #p { height: 50px !important; } /*    fullscreen */ [data-player-size="fullscreen"] #movie_player { width: 100% !important; height: 100% !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only #rc { display: none; }