а получается так
Отслеживать
10.4k 21 21 золотой знак 25 25 серебряных знаков 53 53 бронзовых знака
задан 23 янв 2020 в 13:58
187 9 9 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Ваш текущий код не адаптивен под мобильные телефоны и задает высоту в 0 пикселей там, где не нужно (что грозит ошибками в дальнейшем).
Правильная вставка адаптивного виде с Youtube
в вашем случае нужно обернуть frame в ещё один div и применить к нему стили, а со своих колонок убрать .tube (везде) и добавить отступ сверху для main-container. Вот так:
И добавляете следующие стили
Как убрать чёрные полосы в развёрнутом видео на Ютуб в смартфонах Андроид и iPhone?
.main-content < margin-top: 25px; >.youtube < position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0px; height: 0; >.youtube iframe
Результат в десктоп версии:
Источник: ru.stackoverflow.com
Черные полосы по краям видео при использовании YouTube
На некоторых видео YouTube при воспроизведении в широкоэкранном формате появляются черные полосы со всех сторон изображения.
Причины могут быть такие:
- Видео файл содержит горизонтальные черные полосы в верхней и нижней части видео-плеера для соответствия соотношению сторон 4:3.
- В случае соотношения сторон 16:9 плеер YouTube добавляет вертикальные черные полосы, чтобы соответствовать формату 4:3.
- В результате мы видим черные полосы со всех сторон изображения.
Если Вы загружаете видео в широкоэкранном формате, то можете избежать добавления полос для изображения, обрезав видео до формата 16:9.
Источник: webznam.ru