Адаптивное (резиновое) видео YouTube в контенте

iframe добавляемый встраиванием ссылки или шорткодом embed, не адаптивный, т.е. высота не подстраивается под ширину экрана. Поэтому при изменении ширины плеера (iframe), высота меняться не будет.

Часто можно видеть, как плеер YouTube пытаются сделать адаптивным с помощью JavaScript, но это лучше делать на чистом CSS. Соотношение сторон (пропорции) плеера будут соблюдены.

Добавляем обёртку для плеера YouTube, например в functions.php темы:

# Адаптивный (резиновый) плеер YouTube
add_filter( 'oembed_dataparse', 'adaptive_youtube_iframe', 10, 2 );

function adaptive_youtube_iframe( $return, $data ) {

	if ( 'YouTube' === $data->provider_name ) {
		$return = "<div class='youtube-container'>{$return}</div>";
	}

	return $return;
}

Или можно через хук embed_oembed_html. Он срабатывает всегда, а не только при создании кэша встраивания.

# Адаптивный (резиновый) плеер YouTube
add_filter( 'embed_oembed_html', 'adaptive_youtube_iframe', 10, 2 );

function adaptive_youtube_iframe( $embed_html, $url ) {

	$is_youtube = ( false !== strpos( $url, 'youtube.com' ) || false !== strpos( $url, 'youtu.be' ) );

	if ( $is_youtube ){
		$return = "<div class='youtube-container'>{$return}</div>";
	}

	return $return;

}

Теперь добавляем стили, например в style.css темы:

.youtube-container  {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.youtube-container  iframe,
.youtube-container  object,
.youtube-container  embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}