Тег видео - LakEnd.RU

В этой статье я подробно расскажу, как настроить автоматическое преобразование ссылок RuTube и VK Video в embed-плееры на вашем WordPress-сайте. Это решение значительно упростит процесс добавления видео и улучшит пользовательский опыт.

Зачем это нужно?

Проблема: При добавлении видео с RuTube и VK Video в WordPress приходится вручную копировать HTML-код для вставки, что занимает время и неудобно.

Решение: Настроить автоматическое преобразование обычных ссылок в готовые видео-плееры с помощью кастомного кода в functions.php.

Преимущества метода

✅ Экономия времени — просто вставляете ссылку, WordPress делает все остальное
✅ Единообразие — все видео выглядят одинаково стильно
✅ Адаптивность — видео корректно отображаются на мобильных устройствах
✅ SEO-дружелюбность — улучшает поведенческие факторы
✅ Безопасность — использует официальные embed-коды платформ

Подготовка к установке

Перед началом работы убедитесь, что:

У вас есть доступ к файлам темы WordPress
Вы используете дочернюю тему (рекомендуется)
Сделана резервная копия сайта

Вариант 1: Отдельные обработчики для каждой платформы

Код для RuTube

Добавьте этот код в файл functions.php вашей темы:

/** oEmbed для RuTube */
class RuTubeEmbed {

    public function __construct() {
        add_action( 'init', array( $this, 'init' ) );
    }

    public function init() {
        wp_embed_register_handler( 
            'rutube',
            '#https?://(www\.)?rutube\.ru/video/([a-zA-Z0-9]+)/?#i',
            array( $this, 'embed_handler' )
        );
    }

    public function embed_handler( $matches, $attr, $url, $rawattr ) {
        $video_id = $matches[2];
        $embed_url = "https://rutube.ru/play/embed/{$video_id}/";

        $width = isset($rawattr['width']) ? $rawattr['width'] : 720;
        $height = isset($rawattr['height']) ? $rawattr['height'] : 405;

        $embed = sprintf(
            '<iframe width="%d" height="%d" src="%s" style="border: none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
            esc_attr($width),
            esc_attr($height),
            esc_url($embed_url)
        );

        return $embed;
    }
}

new RuTubeEmbed();

function rutube_embed_styles() {
    echo '
<style>
    .wp-block-embed__wrapper iframe[src*="rutube.ru"],
    .entry-content iframe[src*="rutube.ru"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }
    </style>';
}
add_action( 'wp_head', 'rutube_embed_styles' );

Код для VK Video

/** oEmbed для VKVideo */
class VKVideoEmbed {

    public function __construct() {
        add_action( 'init', array( $this, 'init' ) );
    }

    public function init() {
        wp_embed_register_handler( 
            'vkvideo',
            '#https?://(www\.)?vkvideo\.ru/video-(\d+)_(\d+)/?#i',
            array( $this, 'embed_handler' )
        );
    }

    public function embed_handler( $matches, $attr, $url, $rawattr ) {
        $owner_id = $matches[2];
        $video_id = $matches[3];
        $embed_url = "https://vkvideo.ru/video_ext.php?oid=-{$owner_id}&id={$video_id}&hd=2";

        $width = isset($rawattr['width']) ? $rawattr['width'] : 853;
        $height = isset($rawattr['height']) ? $rawattr['height'] : 480;

        $embed = sprintf(
            '<iframe src="%s" width="%d" height="%d" style="background-color: #000" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>',
            esc_url($embed_url),
            esc_attr($width),
            esc_attr($height)
        );

        return $embed;
    }
}

new VKVideoEmbed();

Вариант 2: Универсальный обработчик (рекомендуется)

Для одновременной поддержки обеих платформ используйте этот компактный код:

/** oEmbed для RuTube и vkVideo */
class SimpleVideoEmbed {

    public function __construct() {
        add_action( 'init', array( $this, 'init' ) );
        add_action( 'wp_head', array( $this, 'add_styles' ) );
    }

    public function init() {
        // RuTube
        wp_embed_register_handler( 
            'rutube',
            '#https?://(www\.)?rutube\.ru/video/([a-zA-Z0-9]+)/?#i',
            array( $this, 'rutube_handler' )
        );

        // VK Video
        wp_embed_register_handler( 
            'vkvideo',
            '#https?://(www\.)?vkvideo\.ru/video-(\d+)_(\d+)/?#i',
            array( $this, 'vkvideo_handler' )
        );
    }

    public function rutube_handler( $matches, $attr, $url, $rawattr ) {
        $video_id = $matches[2];
        return '<div class="responsive-video"><iframe width="100%" height="405" src="https://rutube.ru/play/embed/' . $video_id . '/" style="border: none; max-width: 720px;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';
    }

    public function vkvideo_handler( $matches, $attr, $url, $rawattr ) {
        $owner_id = $matches[2];
        $video_id = $matches[3];
        return '<div class="responsive-video"><iframe src="https://vkvideo.ru/video_ext.php?oid=-' . $owner_id . '&id=' . $video_id . '&hd=2" width="100%" height="480" style="background-color: #000; max-width: 853px;" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe></div>';
    }

    public function add_styles() {
        echo '
<style>
        .responsive-video {
            text-align: center;
            margin: 20px 0;
        }

        .responsive-video iframe {
            width: 100% !important;
            max-width: 853px;
            height: auto !important;
            aspect-ratio: 16 / 9;
        }
        </style>';
    }
}

new SimpleVideoEmbed();

Как использовать

После добавления кода работа становится невероятно простой:

Для RuTube:

Копируете ссылку на видео: https://rutube.ru/video/e1bdee7795e5390d2a3db814f87e3abb/
Вставляете в редактор WordPress
Сохраняете запись

Для VK Video:

Копируете ссылку: https://vkvideo.ru/video-211276532_456240382
Вставляете в редактор WordPress
Сохраняете запись

Результат: Ссылка автоматически превращается в красивый видео-плеер!

Примеры корректных ссылок

RuTube:

<div class="responsive-video"><iframe width="100%" height="405" src="https://rutube.ru/play/embed/e1bdee7795e5390d2a3db814f87e3abb/" style="border: none; max-width: 720px;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
<div class="responsive-video"><iframe width="100%" height="405" src="https://rutube.ru/play/embed/abc123def456/" style="border: none; max-width: 720px;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

VK Video:

<div class="responsive-video"><iframe src="https://vkvideo.ru/video_ext.php?oid=-211276532&id=456240382&hd=2" width="100%" height="480" style="background-color: #000; max-width: 853px;" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe></div>
<div class="responsive-video"><iframe src="https://vkvideo.ru/video_ext.php?oid=-123456789&id=987654321&hd=2" width="100%" height="480" style="background-color: #000; max-width: 853px;" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe></div>

Решение возможных проблем

1. Видео не отображается

Проверьте правильность ссылки
Убедитесь, что код добавлен в functions.php
Очистите кэш WordPress

2. Неправильный размер видео

Отредактируйте значения width и height в коде
Настройте CSS-стили под вашу тему

3. Конфликты с другими плагинами

Отключите другие видео-плагины
Проверьте консоль браузера на наличие ошибок JavaScript

SEO-преимущества

Внедрение этого решения дает несколько SEO-бонусов:

Уменьшение времени на добавление контента — вы можете публиковать больше видео-материалов
Улучшение поведенческих факторов — пользователи дольше остаются на странице с видео
Адаптивность — корректное отображение на мобильных устройствах положительно влияет на ранжирование
Снижение показателя отказов — видео удерживает внимание посетителей

Дополнительные настройки

Изменение размеров по умолчанию

В коде обработчиков вы можете изменить стандартные размеры:

// Для RuTube
$width = isset($rawattr['width']) ? $rawattr['width'] : 800; // вместо 720
$height = isset($rawattr['height']) ? $rawattr['height'] : 450; // вместо 405

// Для VK Video  
$width = isset($rawattr['width']) ? $rawattr['width'] : 900; // вместо 853
$height = isset($rawattr['height']) ? $rawattr['height'] : 506; // вместо 480

Добавление кастомных CSS-стилей

Для дополнительной стилизации используйте CSS:

.responsive-video {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Заключение

Настроив автоматическую вставку видео с RuTube и VK Video, вы значительно упростите процесс управления контентом на своем WordPress-сайте. Это решение работает надежно, легко настраивается и положительно влияет на SEO-показатели.

Выберите подходящий вариант кода из представленных выше, добавьте его в functions.php и наслаждайтесь упрощенным процессом добавления видео-контента!

Примечание: Всегда тестируйте изменения на staging-окружении перед применением на рабочем сайте и создавайте резервные копии.