Как разместить несколько YouTube-плееров рядом (по горизонтали) с сохранением пропорций?

Друзья, прошу вашей помощи! Бьюсь с вопросом который день, но ничего толкового не выходит.

Суть вопроса. Нужно разместить несколько YouTube-плееров рядом. Точнее, в зависимости от разрешения устройства, определять: ставить ли следующий плеер (DIV с плеером) слева, или переносить вниз. И каждый раз ролики должны занимать всю ширину блока (если их несколько, то с каким-то расстоянием между ними).

При этом, поскольку мы заранее не знаем ширину и высоту плеера, я применил найденный в сети лайфхак с padding: 56.25% для того, чтобы сохранить соотношение сторон 16:9 без черных полос сверху и снизу (см. пример: https://jsfiddle.net/egkostin/n9zqb5u3/7/).

Думал, что мне как-то поможет Flex (https://css-tricks.com/snippets/css/a-guide-to-fle... но с ним iframe ютубовский вообще перестал отображаться. ¯\_(ツ)_/¯

Что в итоге хочу получить — на прототипе ниже.

5d486cff07deb782058584.png
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
Flexbox действительно может помочь.
Для каждой ширины экрана нужно задать базовую ширину дочерних элементов.

Результат
https://codepen.io/hisbvdis/pen/xvpGYd?editors=1100

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dimovich85
@dimovich85
JS is everywhere
Дальше обычная сетка. Смотрите smartgrid, bootstrap. Кстати, есть рекомендация ставить вместо iframe картинки с кнопкой плей, и только при нажатии плей грузить iframe с видео.
Ответ написан
vetero4eg
@vetero4eg
Frontend
Помимо этого хака, ограничьте минимальную / максимальную ширину видео и подключите флексы для переноса.

Если для 3205 тестовое делаешь - учти они странные, тестовое не оплачивают, хоть и обещают, и вообще не пойми что хотят.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы