Как встроить адаптивное видео с YouTube в WordPress

21 ноября 2016 25

Вряд ли вы столкнётесь с проблемами адаптивности при встраивании видео с YouTube, если используете какую-то современную, продвинутую или премиум-тему WordPress. А вот с бесплатными и любительскими темами проблемы возникают очень даже часто. И сегодня я расскажу как с этим бороться.

Reg.ru: Неограниченный бесплатный трафик
Reg.ru: Неограниченный бесплатный трафик

Рассмотрим ситуацию на примере популярного видеохостинга YouTube. При вставке видео в редактор WordPress, можно заметить, что видео — это ни что иное, как старый добрый iframe с фиксированными размерами сторон.

Как встроить адаптивное видео с YouTube в WordPress

Если в теме не предусмотрена обработка фрейма, никакой адаптивности не будет, естественно. На низких разрешениях видео будет просто выходить за пределы экрана. Потому что в адаптивной вёрстке размеры должны задаваться в относительных единицах.

jQuery FitVids

Существует несколько способов решения данной задачи. Самый простой и эффективный — это задействовать FitVids. 

FitVids

Небольшой плагин jQuery, который преобразовывает любое видео в адаптивное.

  Скачать

Для этого потребуется осуществить стандартное подключение скрипта FitVids в файле functions.php активной темы. В примере ниже загрузка плагина осуществляется с CDN CloudFlare.

На данный момент актуальной является версия 1.1.0

wp_enqueue_script('//cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js', array('jquery'), '', true);

Инициализация скрипта производится следующим образом:

(function($) {
	$(document).ready(function(){
		// Target your .container, .wrapper, .post, etc.
		$(".post").fitVids();
	});
})(jQuery);

Где .post — класс контейнера, в котором будет произведён поиск и преобразование видео.

Напомню, чтобы минимизировать количество запросов к серверу, JS-скрипты целесообразно хранить как можно в меньшем количестве файлов. И уж тем более никогда не вставлять их в HTML-код. Файлы JS-скриптов загружаются только один раз при просмотре первой страницы сайта. И далее используются из кэша браузера. При внедрении же JS непосредственно в HTML-код, браузер будет загружать JS-код при каждой загрузке страницы. Что не совсем рационально, особенно в масштабных и посещаемых проектах.

Плагин FitVids для WordPress

Наверное, было бы странно, если бы FitVids не существовал в виде плагина для WordPress. Возможно кому-то такой вариант покажется более удобным. Останавливаться подробно на нём не буду, там всё предельно просто.

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее