Una de las novedades más importantes que nos presentó la versión 4.7 de WordPress es la inclusión de cabeceras que admiten vídeo además de imágenes. Hoy en día es muy común ver en muchas webs este componente introductorio, que por lo general dura unos pocos segundos, se reproduce en bucle y no tiene sonido. Para ciertos sitios es un elemento importante que acompaña un mensaje determinado, mientras que para otros es simplemente un elemento decorativo.

Sea cual fuere la intención de incluir un vídeo de fondo, en este tutorial vamos a aprender a aplicar el flamante soporte para cabeceras multimedia en uno de los temas de una sola página más usados. De esta manera no tendremos que depender de ningún plugin, y además nos servirá como base para aplicarlo a cualquier otro tema.

Paso 1: añadir soporte para cabecera multimedia

Como no podía ser de otra manera, vamos a usar un tema hijo. Las instrucciones se encuentran en esta entrada.

Lo primero que haremos será agregar el soporte para la cabecera multimedia en el archivo functions.php. A continuación del código existente y antes del cierre de la etiqueta ?> (si lo hubiere), pegaremos lo siguiente:

add_theme_support( 'custom-header', array(
 'video' => true,
 'width' => 1920,
 'height' => 1080,
) );

Con esto veremos que el panel Cabecera multimedia ahora se ha agregado a nuestro Personalizador.

Zerif - Cabecera multimedia

Paso 2: imprimir la cabecera multimedia en el tema

Obviamente, el código anterior por sí solo aún no nos sirve de nada, porque tenemos que añadir la etiqueta del vídeo dentro de tema. Con Zerif Lite vamos a aprovechar uno de los tantos hooks que incluye desde la versión 1.8.3.6. Simplemente tendremos que pegar en el archivo functions.php el siguiente código:

function zerif_child_video_header() {
 if ( has_custom_header() ) :
 the_custom_header_markup();
 endif;
}
add_action('zerif_top_body','zerif_child_video_header');

Con lo cual, el código completo de functions.php quedaría de la siguiente manera:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);
function child_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ));
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
add_theme_support( 'custom-header', array(
 'video' => true,
 'width' => 1920,
 'height' => 1080,
) );
function zerif_child_video_header() {
    if (has_custom_header()) :
    the_custom_header_markup();
    endif; 
}
add_action('zerif_top_body','zerif_child_video_header');

Con esto ya tendríamos la cabecera multimedia funcionando en nuestro Zerif Lite. Pero, claro, nos falta el último paso, que es darle estilo.

Paso 3: aplicar estilos para la correcta visualización

En el archivo custom.css o en el recuadro CSS adicional del Personalizador, pegamos lo siguiente:

.wp-custom-header img,
.wp-custom-header video,
.wp-custom-header iframe {
    position: fixed;
    left: 50%;
    max-width: 1920px;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}
.wp-custom-header .wp-custom-header-video-button {
    display: none;
}

Ahora sí podremos ver correctamente el vídeo de fondo, que puede ser tanto un archivo en formato MP4 subido a nuestra biblioteca de medios, como un vídeo de YouTube.

Antes de cerrar, vamos a hacer un par de salvedades. Cuando los vídeos están listos para ser mostrados, el script de la cabecera multimedia inserta un botón para pausar y reanudar la reproducción. Esto contribuye a mejorar la accesibilidad. En nuestro ejemplo, tan solo lo ocultamos con el último código CSS, pero esta no es una buena práctica ni es lo recomendable. Y gracias a que el script no aplica ningún CSS al botón, es muy fácil controlar su apariencia desde los estilos del tema.

Vamos a tomar como referencia el estilo del botón que usa el tema Twenty Seventeen. En primer lugar, tendremos que usar un filtro para personalizar el código de los botones. En nuestro caso, será el siguiente (pegaremos el código en el archivo functions.php):

function zerif_child_video_controls( $settings ) {
    $settings['l10n']['play'] = __('<i class="fa fa-play"></i><span>Reproducir</span>');
    $settings['l10n']['pause'] = __('<i class="fa fa-pause"></i><span>Pausar</span>');
    return $settings;
}
add_filter( 'header_video_settings', 'zerif_child_video_controls' );

Con esto usaremos los iconos de Font Awesome que están integrados en el tema, y una etiqueta span que nos permitirá ocultar el texto pero dejarlo disponible para que lo reconozcan los lectores de pantalla.

Por último, añadimos el siguiente código CSS para darles el estilo de Twenty Seventeen:

.wp-custom-header .wp-custom-header-video-button {
    background-color: rgba(34, 34, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6);
    height: 45px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 30px;
    top: 112px;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
    width: 45px;
    z-index: 1;
}
.wp-custom-header .wp-custom-header-video-button:hover,
.wp-custom-header .wp-custom-header-video-button:focus {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(34, 34, 34, 0.8);
    color: #fff;
}
.wp-custom-header .wp-custom-header-video-button span {
    position: absolute;
    top: -9999px;
}

Así tendremos el vídeo de fondo y un botón que mejora la accesibilidad, con un estilo elegante y discreto.

Vídeo de fondo en Zerif Lite

Para terminar, recordemos que los vídeos de fondo, de manera predeterminada, se desactivan en los teléfonos móviles (por una cuestión de compatibilidad), y se muestran únicamente en resoluciones que superan los 900px. Si necesitamos que se visualicen en una resolución menor (por ejemplo en una tablet), tendremos que agregar el siguiente código en el archivo functions.php:

function zerif_child_video_settings( $settings ) {
  $settings['minWidth']  = 600;
  return $settings;
} 
add_filter( 'header_video_settings', 'zerif_child_video_settings' );

Tampoco olvidar que este procedimiento para añadir un vídeo de fondo requiere al menos WordPress 4.7 y Zerif Lite 1.8.3.6 o superiores.

En un próximo tutorial veremos cómo añadir un vídeo de fondo en el tema OnePress.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)