Как вставить видео Rutube на сайт WordPress

Так как многие испытывают трудности с просмотром Ютуба, то многие блогеры начали перезаливать видео на альтернативные платформы. На пример рутуба я покажу как встроить аккуратно свое видео на сайт.

Почему аккуратно? Да все просто, если вставить как есть через режим текст или вставкой произвольного html то скорей всего видео окажется слева сайта, а не в контенте. А если вставить ссылку через функционал встраивания т.е вставляем ссылку, а он сам ее переводит в видео, то ничего не получится. Давайте разберемся.

Метод через HTML

Это метод подойдет тем, кто не хочет писать php код итд. Для этого мы просто добавляем в контент блок виджет "Произвольный HTML"

и далее вставляем свой код с сайта рутуб. Чтобы найти код, переходим на нужное видео и под названием видео есть кнопка "Поделится" Нажимаем ее и далее в окошке, внизу блока нажимаем "Код вставки плеера". Далее просто копируем код из появившегося поля.

Вот пример полученного кода для вставки

<iframe width="720" height="405" src="https://rutube.ru/play/embed/48d4c504e46d01723a5bb920a064c383/" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

А далее, магия. Чтобы он корректно отображался (хотя иногда и отображается правильно) нужно видоизменить код, а именно заключить его в блок div

<div class="wp-block-embed"> ТУТ_ВАШ_КОД </div>

После этого сохраняем и радуемся 🙂

Вариант через встраивание

Чтобы встраивание работало как нужно, нам необходимо добавить код, например в function.php или через плагин php сниппетов например FluentSnippets

// rutube embed
wp_embed_register_handler('rutube', '#https?:\/\/(www\.)?rutube\.ru\/(play|video|shorts)\/([a-zA-Z0-9]+)#i', 'wp_embed_handler_rutube');
function wp_embed_handler_rutube( $matches, $attr, $url, $rawattr ) {
    $path = $matches[2] === 'shorts' ? 'video/embed' : $matches[2] . '/embed';
    $embed = sprintf(
        '<iframe width="720" height="405" src="https://rutube.ru/%1$s/%2$s" frameBorder="0" allow="clipboard-write" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
        esc_attr($path), esc_attr($matches[3])
    );
 
    return $embed;
}

Если все сделано правильно, то теперь как только Вы вставите ссылку в статью, сразу потянется функционал встраивания видео на сайт, как это работало при вставке ссылки Ютубе

Дополнительно для VK

Все описанные выше методы, тоже работают для видео от ВКонтакте или VK Video.

А вот ниже код для работы ссылок через встраивание.

// VKontakte embed
wp_embed_register_handler('vkontakte', '#https?://vk\.com/video(-?\d+)_(\d+)#i', 'wp_embed_handler_vkontakte');

function wp_embed_handler_vkontakte( $matches, $attr, $url, $rawattr ) {
    $embed = sprintf(
        '<iframe src="https://vk.com/video_ext.php?oid=%1$s&id=%2$s&hd=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>',
        esc_attr($matches[1]), esc_attr($matches[2])
    );

    return $embed;
}

Адрес видео должен быть вида https://vk.com/video-22822305_456242441
т.е правый клик по видео и копировать ссылку.