Адаптивные плееры Youtube на десктопах и мобильных

Проблема плеера в том что у него нефиксированные размеры, поэтому возникают трудности на адаптивных сайтах. Ширину можно задать в 100%, а высоту нет, поэтому получаются вытянутый плеер на большом экране или высокий на узком экране. Если ширина задана в пикселях то на мобильных, плеер выходит за границы сайта.

Сделать видео нормального размера на всех экранах можно сделать, обвернув <iframe> дивом с определёнными CSS-стилями.

<div class="iframe_video">
	<iframe width="100%" height="315" src="https://www.youtube.com/embed/..."></iframe>
</div>
HTML
.iframe_video {
	height: 0px;
	padding-bottom: 56.2%;
	position: relative;
}
.iframe_video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}
CSS

Если вставок видео на сайте много, то добавить <div class=""> можно с помощью JQuery:

$(document).ready(function(){
	$('iframe[src*="youtu"]').each(function(){
		$(this).wrap('<div class="iframe_video"></div>');
	});
});
JS

Результат на десктопе:

Мобильные – вертикальная ориентация:

Мобильные – горизонтальная ориентация:

24.09.2020

Комментарии

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

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

Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
2898
0
Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
1595
+1
Изначально мета-тег viewport появился в мобильной версии Safari, далее его подхвати остальные разработчики и мобильных браузеров, хотя он не является частью стандарта W3C.
1430
0
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
5394
+1
Чтобы вместить большую таблицу, достаточно обернуть её в и добавить несколько CSS стилей, чтобы появился горизонтальный...
2993
+2
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
22684
+13