Стаття з'явилася з двох причин, хороших плагінів для реалізації адаптивних відео з YouTube я не знайшов, а ще тому що це спрацювало для мене я вирішив поділитися цим досвідом з вами.

По суті, розробляючи черговий сайт для клієнта, він вирішив вставити у статтю відео з YouTube. Плагін яким раніше користувалися, був видалений з незрозумілих причин з репозиторію, і я почав шукати рішення і думати, як це питання вирішити.

Для того, щоб відео стало адаптивним в інтернеті, є купа прикладів, коли його загортають в окремий тег DIV і додають до нього стилі., а в WordPress за умовчанням такого тега немає, тому перше що потрібно зробити це додати хук який буде працювати з контентною частиною і загортати наприклад фрейм у потрібний тег.

Приклад хука для адаптивного відео на YouTube

<?php

add_filter('the_content', функція($content) {
	повернення str_replace(array("<iframe", "</iframe>"), array('<клас div="iframe-контейнер"><iframe', "</iframe></див.>"), $content);
});

add_filter('embed_oembed_html', функція ($html, $url, $АТТР, $post_id) {
	if(Стрпос($html, 'youtube.com') !== хибність || Стрпос($html, 'youtu.be') !== хибність){
  		повернення '<клас div="Вбудовано-чуйне вбудовування-чуйний-16by9">' . $html . '</див.>';
	} ще {
	 повернення $html;
	}
}, 10, 4);


add_filter('embed_oembed_html', функція($код) {
  повернення str_replace('<iframe', '<клас iframe="вбудовування-адаптивний елемент" ', $код);
});

Після створення хука та розміщення його у файл functions.php або у свій плагін, ви можете перейти до підключення стилів до своєї теми або плагіну. Нижче наведу приклад таких стилів.

Приклад стилів адаптивного виведення YouTube

.Адаптивний до вбудовування {
  позиція: відносний;
  Відображення: блокувати;
  height: 0;
  Заповнення: 0;
  Переповнення: hidden;
}
.вбудовування-адаптивний .embed-responsive-item,
.Iframe, що реагує на вбудовування {
  позиція: абсолют;
  верх: 0;
  низ: 0;
  Ліворуч: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.Embed-responsive-16by9 {
  підкладка-дно: 56.25%;
}

Мені цей код дуже допоміг і сподіваюсь, допоможе комусь ще. Якщо вам допоміг, буду радий вашим коментарям із вдячністю та опишіть ваш випадок. Можливо, ваш випадок допоможе розвинути цю статтю. Ваші коментарі підштовхуватимуть мене писати ще корисні матеріали.