Антон Усачев

1. Заверстать такую полоску, в ней элемент с нулевой шириной и белой заливкой.
2. Взять все слайды за 100% (допустим, их 4).
3. Смотреть какой слайд в данный момент активен (допустим, третий) и считать ширину заливочного элемента:

$('.заливочный_элемент').width(100 / все_слайды.length * (активный_слайд.index() + 1) + '%');

4. Получаем 75% ширины.

По высоте, наверное, никак, эта технология не предусматривает такого поведения. В помощь css columns на чистом цсс, что тоже вряд ли даст нужный результат, либо в идеале masonry на js.

Правильный блок выбирать нужно:
.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.

Странно, что не получилось на masonry, он такое умеет точно. На цсс подобное делается на columns. Для наглядного понимания можно зайти сюда и потыкать ссылочки.

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

Копаем в сторону бэкдропа в полноэкранном режиме:

:not(:root):-webkit-full-screen::backdrop {
    opacity: .75;
}

img {
    /* вместо */
    flex-shrink: 0;
    flex-grow: 1;
    /* поставить это */
    flex: 1 1 auto;
}

Хотя правильней было бы каждую картинку обернуть дивом со стилями выше, а самим картинкам дать:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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