November 10, 2013 at 03:22

Another way to optimize the Youtube interface

    After reading the latest article on the Youtube Center , I decided to share with the habrasociety my way of taming the fat interface of Youtube.

    image



    Youtube Center is certainly a good extension, but Youtube begins to slow down even more noticeably with it. I’ll offer you Stylish - this is an extension for adding your own styles to any site, they already wrote about it on habrahabr.

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

    1. Youtube to watch the video


    I will give styles that suit me simultaneously for the monitors 1280x800 and 1920x1080. After their application, Youtube looks something like this:

    image

    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 did not stop there, then the most delicious :)

    2. Youtube as an audio player


    Perhaps you looked into 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 use Youtube more to listen to music. Some time ago, I even wrote a script to download an entire 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 processor’s resource consumption by two to three times: image

    Further actions are aimed at automating the fast switching of the modes “from video” and “without video”.

    2.1. Html5 inclusion

    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 may have noticed, I'm using a prefix class .audio-onlyand the last step is to automate its addition.

    2.3. UserScript to add .audio-only class

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

    // ==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 will not be superfluous to recall how to install a custom script (it should have the name * .user.js):


    I hope you were not bored in this topic :)

    UPD. Feather beta


    arty mentioned Feather Beta in the comments . To tell you the truth, I didn’t know about this function, it is intended exactly for what I was doing in this topic - trimming 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; }
    Tags:

    Also popular now: