Cómo insertar fácilmente un video en WordPress usando HTML5 y shortcode personalizado

Si deseas incrustar un archivo de video en WordPress sin depender de plugins externos o bloques del editor, puedes crear un shortcode HTML5 personalizado. Esto te permite reutilizar un fragmento de código limpio y compatible con todos los navegadores modernos, manteniendo el control sobre el diseño y comportamiento del reproductor. A continuación, te mostramos cómo crear un shortcode para insertar un video.

Agrega este código en el archivo functions.php de tu tema hijo (o usa un plugin personalizado):

// Shortcode para insertar videos HTML5
add_shortcode('video5', 'html5_video_shortcode');
function html5_video_shortcode($atts) {
    $atts = shortcode_atts( array(
        'src'      => '',
        'width'    => '640',
        'height'   => '360',
        'poster'   => '',
        'autoplay' => false,
        'loop'     => false,
        'muted'    => false,
        'controls' => true,
    ), $atts, 'video5' );

    // Asegurarse de que haya una fuente de video
    if ( empty( $atts['src'] ) ) {
        return '<p><strong>Error:</strong> No se ha definido la URL del video.</p>';
    }

    // Preparar atributos opcionales
    $poster   = $atts['poster'] ? 'poster="' . esc_url($atts['poster']) . '"' : '';
    $autoplay = $atts['autoplay'] ? 'autoplay' : '';
    $loop     = $atts['loop'] ? 'loop' : '';
    $muted    = $atts['muted'] ? 'muted' : '';
    $controls = $atts['controls'] ? 'controls' : '';

    return sprintf(
        '<video src="%s" width="%d" height="%d" %s %s %s %s %s>Your browser does not support the video tag.</video>',
        esc_url( $atts['src'] ),
        intval( $atts['width'] ),
        intval( $atts['height'] ),
        $poster,
        $autoplay,
        $loop,
        $muted,
        $controls
    );
}

Puedes insertar un video en cualquier entrada, página o widget compatible usando este shortcode:

[video5 src="https://tusitio.com/videos/ejemplo.mp4" width="720" height="480" poster="https://tusitio.com/img/preview.jpg" autoplay="true" muted="true"]