openc

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

Рекомендуемые сообщения

openc    0

Разместить на сайте ролик 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    1 919

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
openc    0

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

 

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

 

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

Изменено пользователем openc

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу