Як зробити адаптивне відео для YouTube у WordPress без плагінів

за Ніколаєнко Максим · Опубліковано Вересень 4, 2021 · Оновлено Вересень 4, 2021

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

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

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

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

<?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);
});

<?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);

});

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

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

.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%;
}

.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%;

}

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