Антон Усачев

Правильный блок выбирать нужно:
.single-route .owl-carousel.owl-theme .owl-nav div -->

.single-route .owl-carousel.owl-theme .owl-nav button

Чистый цсс:

Короче. Проблема в том, что труба воспринимает display: none как нулевые высоту и ширину, поэтому дает постеру самое плохое качество (пиксели эти самые). В сети нашлись варианты как сделать кастомный постер хорошего качества через youtube api. Но я нашел способ проще. Вместо того, чтобы долго рассказывать, просто покажу:



Единственный минус: в контент табов больше ничего кроме видео не впихнешь, так как страницы размечены под 16 на 9.

UPD: Тут подумал, а что если при загрузке страницы вкладки будут обе активные (т.е. видны и видео загрузится), и только по docready ты будешь ненужные прятать скриптом? Это должно сработать.

UPD2: Проверил, работает.

Вариаций много, вот одна из них:

Ну как минимум так:

if (window.matchMedia('(max-width: 600px)').matches) {
    $('.block__1').appendTo('.wr__2');
} else {
    $('.block__1').appendTo('.wr__1');
}

А по-хорошему, нужно на старте парсить блоки и давать им, например, какой-то дата-атрибут, куда прописывать стартовые (текущие) значения, с которыми уже сравнивать состояние при изменении ширины экрана.

1. Проверяем, что шрифт поддерживает кириллицу.
2. Качаем шрифт, если этот нужный.
3. Конвертируем ttf или otf в веб-шрифт.
4. Кладем то, что сконвертилось (шрифты и сгенерированный цсс) в желаемую папку в проект (например fonts/dited).
5. Подключаем сгенерированный цсс в проект, не забывая правильно прописать семейство шрифта, как он назван в полученном цсс.
6. Profit.

Можно наколхозить скрипт для принудительного размещения окна в нужной точке. Для наглядного примера накидал, вариант "outside":

Очень просто на флексах:

Вроде того, как я понял:

Простым решением будет дать хидеру top: 0; position: sticky;, а скрипт убрать. Он там явно не нужен при условии, что хидер с самого начала вверху.
А причина скачка в том, что при скролле более 1 пикс от верха, хидер с относительного позиционирования кидается в фиксированное. При отсутствии паддинга равного шапке у враппера, вся страница летит на фикс к top: 0;

Посмотри здесь, вероятно, должно помочь, если я правильно понял задачу.

Предпочитаю использовать. Я сторонник практической линии "один блок – одна задача" и всячески к стремлюсь к ее реализации в любом проекте, что делает вместе с БЭМ финальный код чистым, понятным и читаемым. У враппера вполне ясная задача – обернуть весь контент.
Дополнительные обоснования такой обертки могут всплыть уже в процессе работы: изменить фон, сделать скролл при отсутствии такового у боди, добавление эффектов и анимаций для всего контента и много чего еще...

Проблема здесь: offcanvas-overlay {position: absolute} и здесь: body-innerwrapper {ovrerflow: hidden}