Адаптивные блоки YouTube

Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает. Это ведет к тому что на мобильных блок слишком высокий с черными отступами.

Далее приведено несколько примеров как это исправить, а также вывести несколько блоков в одну линию.

09.02.2019 , обновлено 30.08.2019
Предыдущая запись Настройка плеера YouTube
Следующая запись Сброс стилей (CSS reset)

Комментарии

, чтобы добавить комментарий.

Другие публикации

Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
12.06.2019
11320
+5
Создание товарной накладной в Excel на PHPExcel
Пример как сформировать товарную накладную в с помощью класса PHPExcel. Скачать класс можно с официального сайта или...
27.01.2017
7577
+2
Мета-тег viewport
Изначально мета-тег viewport появился в мобильной версии Safari, далее его подхвати остальные разработчики и мобильных браузеров, хотя он не является частью стандарта W3C.
22.01.2020
342
0
Настройка плеера YouTube
Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.
27.06.2019
2967
+1
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
11.10.2019
731
+1
Выравнивание блоков на всю ширину (justify)
Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну...
03.10.2019
418
0