@creator@creatorhttps://teletype.in/atom/creator2026-07-29T20:49:31.860Zcreator:Hy0GthYBQМеняем положение плеера в Яндекс.Музыке2018-08-09T12:52:37.674Z2018-08-09T13:07:59.416Z<img src="https://teletype.in/files/01/011826e6-dc2f-4d8a-8881-8f48230a7811.gif">Пример приведу на популярном браузере Google Chrome с использованием расширения User CSS.
<p>Пример приведу на популярном браузере Google Chrome с использованием расширения <a href="https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=ru" target="_blank">User CSS</a>.</p>
<p>Две главные претензии из <a href="https://teletype.in/@uxlive/rkIJvoYBQ" target="_blank">этой</a> статьи к интерфейсу music.yandex.ru — длинный путь курсора от вкладки до плеера и высокая вероятность ошибки при работе с прогресс-баром:</p>
<figure class="m_custom">
<img src="https://teletype.in/files/01/011826e6-dc2f-4d8a-8881-8f48230a7811.gif" width="837" />
</figure>
<h2>Изменяем высоту индикатора воспроизведения трека</h2>
<p>Код, который достаточно добавить в расширение User CSS, чтобы увеличить область перемотки песни.</p>
<pre>/* ранее высота была 5 пикселей */
.progress__bar,
.progress__bg {
height: 16px;
}
/* отключаем анимацию «увеличения» высоты */
.bar__content:hover .progress .progress__bg,.bar__content:hover .progress .progress__bar {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
}
</pre>
<h2>Изменяем местоположение панели</h2>
<p>Чтобы разместить панель наверх страницы дополните выше код этим:</p>
<pre>/* создаём небольшое пространство сверху для плеера */
.page-root {
padding-top: 80px;
}
/* помещаем панель управления треком наверх */
.bar {
top: 0;
bottom: unset;
}
/* прогресс-бар перемещаем под панель */
.progress {
top: 60px;
}
/* исправляем положение рекламного места справа */
.sidebar_fixed {
top: 75px;
}
/* исправленим положение очереди прослушивания */
.body_bar-tall .popup_page,
.popup_page {
bottom: 0;
}
/* убираем рекламу о подписке «Плюс» */
.bar-below_plus {
display: none;
}
</pre>
<h2>Получившийся результат:</h2>
<figure class="m_custom">
<img src="https://teletype.in/files/4e/4e0e818f-e219-4cf5-a2fd-a8ef4de6a296.png" width="1552" />
</figure>