Адаптивные блоки 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 398
Предыдущая запись Настройка плеера YouTube
Следующая запись Сброс стилей (CSS reset)

Поделится

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

Способ выравнять текст по вертикали в блоках фиксированной высотой. Текст обворачивается в тег с классом .child, а за...
Если у указать width 100%, то он растянется на всю ширину родителя, но height 100% так не работает.
Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.
Начиная с версии 64 Chrome начал добавлять разрывы в подчеркивании у ссылок, связано это с введением нового CSS...
HTML ссылки для открытия чата и других функций популярных мессенджеров.
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...