Делаем YouTube адаптивным

Любые iframe-ы для любого адаптивного сайта очень сомнительное решение и причиняют боль любому вебмастеру. Но, к сожалению, различные сервисы часто используют именно iframe.

И, конечно, этим страдает всеми любимый YouTube. К счастью, есть несколько простых решений, которые мы можем использовать в своей теме WordPress для автоматического изменения размера встраиваемых видео, чтобы они аккуратно размещались в статьях на сайте.

Код, который я приведу ниже, оборачивает iframe в div и добавляет некоторые классы. Затем CSS изменяет размер объекта до правильной пропорции 16:9.

Как обычно мы будем работать с двумя файлами нашей темы - functions.php и style.css. Скорее всего в вашей теме используются именно эти файлы. Для начала добавляем следующий код в ваш файл functions.php:

add_filter('the_content', function($content) {
	return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
});

add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
	if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
  		return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
	} else {
	 return $html;
	}
}, 10, 4);


add_filter('embed_oembed_html', function($code) {
  return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);
});

Далее, мы должны добавить в файл со стилями (скорее всего в вашем случае style.css) следующие стилевые решения:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

На этом всё. Больше ничего мы добавлять не будем. Совсем скоро я выложу для удобства плагин, который сделает видео Youtube адаптивными, чтобы никому не понадобилось ковыряться в файлах темы, что не всегда правильно делать, т.к. темы периодически обновляются.