Антон Усачев

Чистый цсс:

Короче. Проблема в том, что труба воспринимает 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.

1. Стартовать не все счетчики сразу, а по одному (each).
2. Стартовать те счетчики, которые находятся в блоке с классом slick-active (если видны все, то и стартанут все, так как видимые слайды имеют этот класс).
3. Дополнительно стартовать счетчики по событию слика afterChange (для слайдов с классом выше, когда слайд становится виден).

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

Чтобы не лезть в скрипты, может, что-то вроде этого подойдет?

.select2-selection__choice::after {
	content: ',';
}

.select2-selection__choice:last-child::after {
	content: '';
}

UPD: да, последний элемент в списке не является последним по факту, поэтому можно хакнуть вот так:

.select2-selection__rendered li:nth-last-child(2)::after {
  content: '';
}

Можно наколхозить скрипт для принудительного размещения окна в нужной точке. Для наглядного примера накидал, вариант "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;
}

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

Для простоты можно использовать плагин mousewheel, а дальше, если очень примитивно и условно, то вот так: