Адаптивные видео блоки YouTube
Современная разработка сайтов часто предусматривает размещение видео блоков с YouTube на странице и эти блоки обязательно должны быть адаптивные.
YouTube видео размещается на странце через iframe, но этот тег не адаптивен по высоте. Если задать ширину width="100%", то iframe растянется на всю ширину родителя, но если задать высоту hight="100%" - эффект будет нулевой.
В данной статье приведено несколько примеров от том как можно адаптировать высоту блока или вывести блоки в одну линию.
Автоматическая высота видео
Рабочий пример автоматической высоты видеоCSS код авто высоты для видео
HTML код iframe
Видео youtube по центру с максимальной шириной
Если сайт адаптивный и растягивается на весь экран, то лучше задать максимальную ширину 860-1100px и отценровать видео. В данном примере максимальная ширина видео блока 800px.
Рабочий пример размещения видео по центру с максимальной ширинойCSS код авто высоты для видео
HTML код iframe
Два видео в ряд
Размещение видео блоко в один ряд с выравниванием float: left
Рабочий пример размещения видео в рядCSS код видео в ряд
HTML код видео в ряд на iframe
Три видео в ряд
Пример по аналогии с предыдущим только уже 3 видео в ряду
Рабочий пример размещения трех видеоCSS код видео в ряд
HTML код видео по 3 шт в ряд на iframe
