Как стать автором
Обновить

YouTube в две колонки своими руками

Недавнее повсеместное внедрение нового интерфейса YouTube вызвало немалое недовольство пользователей. И тому есть несколько вполне объективных причин. Например, страница с подписками переехала с главной в пункт меню, а пользователи популярных ныне FullHD мониторов вынуждены наблюдать правую половину экрана полностью белой.

Конечно, для решения второй проблемы появились юзерстили, которые просто возвращают новый интерфейс в центр экрана, где ему и место. На самом YouTube можно найти и другие интересные решения этой проблемы (осторожно, агрессивный звуковой ряд).

Я же решил копнуть чуть поглубже и вспомнить не прошлый интерфейс YouTube, а еще более старую версию.
Чтобы освежить память, выглядела она вот так:
image

Что же в ней такого хорошего? Очень просто: расположение нескольких видео в одном горизонтальном ряду давало куда более высокую плотность информации и позволяло быстрее сориентироваться в подписках. Да, конечно, с тех пор многое поменялось, в YouTube пришли задатки социальной сети, а превьюшки видео стали большими и сочными. Но всё же, у нас пустует добрая половина экрана, а мы вынуждены довольствоваться жалкой одинокой колонкой.

Тогда я решил сделать свой юзерстиль со следующими возможностями:
  • Отображать подписки, интересные видео и т. д. в две колонки, так, чтобы эти колонки занимали всю ширину экрана.
  • Сделать так, чтобы всё это адекватно себя вело на разных разрешениях и при изменении размера браузера
  • Центрировать, опять же, просмотр видео в браузере
  • Центрировать строку поиска


Вот пара скриншотов результата (кликабельно):
image

image

А вот код готового стиля (заранее прошу прощения, если код не соответствует вашему чувству прекрасного, подгонялось чтобы работало, писалось на скорую руку):
/* Created  by EviGL 07-12-2012 */
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("youtube.com") ,url-prefix(http://www.youtube){
    #page {
     width: -webkit-calc(100% - 45px) !important;
     width: calc(100% - 45px) !important;
    }
    #content {
     width: -webkit-calc(100% - 180px) !important;
     width: calc(100% - 180px) !important;
    }
    .branded-page-v2-container {
     width: 100% !important;
    }
    .feed-item-container {
     display: inline-block !important;
      width: -webkit-calc(50% - 45px) !important;
      width: calc(50% - 45px) !important;
      min-width: 350px;
    }
    #watch7-container {
        width: 1000px !important;
        margin: 0 auto  !important;
    }
    #yt-masthead-content {
        margin: 0 auto !important;
        width: 644px !important;
    }
}


Это CSS для аддона Stylish в Firefox. Чтобы установить на Chrome, нужно взять только сами правила, без внешних скобок, и вставить в Stylish для Chrome.
Версия на скорую руку, если найдутся баги, всегда готов их исправить.

Планы на будущее:
  • Сделать что-нибудь с выводом результатов поиска. Будут ли там уместны колонки?
  • Сделать саму область просмотра видео и комментариев шире, в идеале с подгонкой под разрешение экрана.
  • Сделать версию с тремя колонками.

Вот так, после небольших манипуляций, новым интерфейсом YouTube куда приятнее пользоваться. Буду рад выслушать какие-либо предложения и пожелания.
Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.