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

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

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

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

Комментарии

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

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

Размеры Iframe
Если у указать width 100%, то он растянется на всю ширину родителя, но height 100% так не работает.
11677
0
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
6682
0
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
58031
+18
Вывод массива колонками
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
7956
+2
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
13734
+4
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
9672
-1