Задавайте вопросы по курсам WordPress

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

Стаття з’явилася з двох причин, хороших плагінів для реалізації адаптивних відео з 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);
});

Після створення хука та розміщення його у файл 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%;
}

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


Купить хостинг WordPress
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal