Цифровой фронтенд: Технологии, которые связывают глушь с миром

/** 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' );

/** 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();

/** 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
$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

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