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

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

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

1
<div class="video">
	<div class="video-wrp">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
	</div>
</div>
HTML
.video {  
	margin-bottom: 20px;
}
.video-wrp {
	position: relative;
	padding-top: 56.25%;
}
.video-wrp iframe {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	border: none;
}
CSS
2

Если сайт «резиновый», то лучше задать максимальную ширину видео в 800-1000px и отценровать, чтобы оно не было слишком большим. В примере максимальная ширина 600px.

.video {  
	max-width: 600px;
	margin: 0 auto 20px;
}
.video-wrp {
	position: relative;
	padding-top: 56.25%;
}
.video-wrp iframe {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	border: none;
}
CSS
3
<div class="video_2">
	<div class="video_2-row">
		<div class="video_2-col">
			<div class="video_2-wrp">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
 		   </div>
		</div>
		<div class="video_2-col">
			<div class="video_2-wrp">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
  		  </div>
		</div>
	</div>
</div>
HTML
.video_2 {  
	overflow: hidden;
}
.video_2-row {  
	margin: 0 -10px 0 -10px;
}
.video_2-col {
	float: left;
	width: 50%;
	margin-bottom: 20px;
}
.video_2-wrp {
	position: relative;
	padding-top: 56.25%;
	margin: 0 10px 0 10px;
	box-sizing: border-box;
}
.video_2-wrp iframe {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	border: none;
}
CSS

При ширине окна <= 800px вывод в одну колонку:

@media screen and (max-width:800px){
	.video-col {
		width: 100%;
	}
}
CSS
4
<div class="video_3">
	<div class="video_3-row">
		<div class="video_3-col">
			<div class="video_3-wrp">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
 		   </div>
		</div>
		<div class="video_3-col">
			<div class="video_3-wrp">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
  		  </div>
		</div>
		<div class="video_3-col">
			<div class="video_3-wrp">
				<iframe width="560" height="315" src="https://www.youtube.com/embed/qJRfbzfYzEc"></iframe>
			</div>
		</div>
	</div>
</div>
HTML
.video_3 {  
	overflow: hidden;
}
.video_3-row {  
	margin: 0 -10px 0 -10px;
}
.video_3-col {
	float: left;
	width: 33.3%;
	margin-bottom: 20px;
}
.video_3-wrp {
	position: relative;
	padding-top: 56.25%;
	margin: 0 10px 0 10px;
	box-sizing: border-box;
}
.video_3-wrp iframe {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	border: none;
}
CSS

При ширине от 1200px вывод в две колонки, от 800px – в одну:

@media screen and (max-width:1200px){
	.video_3-col {
		width: 50%;
	}
}
@media screen and (max-width:800px){
	.video_3-col {
		width: 100%;
	}
}
CSS
09.02.2019, обновлено 30.08.2019
9400
Предыдущая запись Настройка плеера YouTube
Следующая запись Сброс стилей (CSS reset)

Комментарии

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

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

Размеры Iframe
Если у указать width 100%, то он растянется на всю ширину родителя, но height 100% так не работает.
27389
+1
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
22010
+2
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
141521
+36
Вывод PHP-массива колонками
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
19650
+4
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
20692
+8
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
73867
+2