Рассмотрим ситуацию на примере популярного видеохостинга YouTube. При вставке видео в редактор WordPress, можно заметить, что видео — это ни что иное, как старый добрый iframe с фиксированными размерами сторон.
Если в теме не предусмотрена обработка фрейма, никакой адаптивности не будет, естественно. На низких разрешениях видео будет просто выходить за пределы экрана. Потому что в адаптивной вёрстке размеры должны задаваться в относительных единицах.
jQuery FitVids
Существует несколько способов решения данной задачи. Самый простой и эффективный — это задействовать FitVids.
Для этого потребуется осуществить стандартное подключение скрипта 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. Возможно кому-то такой вариант покажется более удобным. Останавливаться подробно на нём не буду, там всё предельно просто.