Адаптивное видео - несколько роликов в одну строку

[openc]

Разместить на сайте ролик Youtube в адаптивном виде можно при помощи css (пример кода ниже).

Вопрос: как разместить несколько (2 или 3) ролика в одну строку, так чтобы они были адаптивными? Пробовал играть параметрами контейнеров - не получается. При этом в редакторе отображается два ролика, но на странице только один - второй по счёту iframe.

 

.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

[Tom]

Сетка бутстрап....

<div class="row">
<div class="col-md-6">Видео</div>
<div class="col-md-6">Видео</div>
</div>

пример по 2 и по 3 видео в ряд

[openc]

Спасибо. Выбрал вариант с 3 роликами в строку.

 

Единственное пришлось подобрать значение height для фрейма (установил 197, а не 215) - чтобы на компьютере не было черных полос сверху и снизу, а в мобильной версии не обрезалась обложка ролика Youtube. В решение выше такой проблемы нет. Еще проверю корректность отображения на разных устройствах.

 

P.S. И класс видимо col-md-4 (как в примере на сайте), а не col-md-6 (в тексте выше)  :-)

Змінено 28 грудня 2016 користувачем openc