Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

 

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах

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

 

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

 

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

Змінено користувачем openc
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.