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

Question

[Евгений Костин]

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

Суть вопроса. Нужно разместить несколько 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 ютубовский вообще перестал отображаться. ¯\_(ツ)_/¯

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

Comments

[Froggyweb]

тебе нужна ширина элемента в пикселах, процентах или еще в чем. флекс именно тебе только навредит чем поможет. если пользоваться терминами бутсрапа, ло разрешения 720 col-12 на 950 cok-6 ну и далее по списку.
грузить кучу фреймов кстати на страницу - фу. можно подменять изображениями со ссылками на видео, для этого есть скрипты или тупое забивание адреса по id видео

Answer 1

[Рома Зварич]

Flexbox действительно может помочь.
Для каждой ширины экрана нужно задать базовую ширину дочерних элементов.

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

Comments

[Евгений Костин]

Спасибо огромное! Класс! Это то, что нужно.

Единственное, не пойму, почему на реальном проекте на мелких разрешениях исчезает не только сам блок, но и то, что его окружает сверху и снизу. Не сочтите за наглость, но буду очень благодарен, если глянете: https://badbedshop.ru/seks-igrushki/vibrostimulyat...

[Рома Зварич]

Евгений Костин, не уверен, правильно ли понял вопрос.

Задано правило, что при ширине экрана меньше 1299px, блок .c-product-page__content, включающий в себя другие блоки, скрывается

[Евгений Костин]

Рома Зварич, да, но вместо него появляется c-product-page__responsive-content. Можно проверить на другой карточке: https://badbedshop.ru/seks-igrushki/vibrostimulyat... А здесь же, получается, он как-то «съедается» флексом что ли… И, несмотря на то, что в инспекторе видно, что не скрыт — не виден на странице.

[Рома Зварич]

Увы, снова не всё понятно.

несмотря на то, что в инспекторе видно, что не скрыт — не виден на странице

Это Вы про блок c-product-page__responsive-content?
Если да, то он же вложен внутрь элемента c-product-page__content, который скрывается, заодно скрывая все дочерние элементы.

[Евгений Костин]

Рома Зварич, да, я про c-product-page__responsive-content. Но он не вложен в c-product-page__content, а идёт следом за ним:

[Рома Зварич]

Евгений Костин,
1) На второй карточке расположен рядом и потому не скрывается на небольших экранах

Скриншот

2) Но на первой карточке он вложен и наверное, потому скрывается на небольших экранах

Скриншот

[Евгений Костин]

Рома Зварич, да, это был косяк с несколькими тегами

Answer 2

[Dima Polos]

Дальше обычная сетка. Смотрите smartgrid, bootstrap. Кстати, есть рекомендация ставить вместо iframe картинки с кнопкой плей, и только при нажатии плей грузить iframe с видео.

Answer 3

[Ольга Ветер]

Помимо этого хака, ограничьте минимальную / максимальную ширину видео и подключите флексы для переноса.

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

Comments

[Евгений Костин]

Спасибо! Не-не, мне для себя. )

[Ольга Ветер]

Евгений Костин, у меня вот здесь немного странноватое решение вышло, но оно работает, можете поковыряться в инспекторе в стилях