Ya tenemos tutoriales para reemplazar la imagen de la cabecera de la página de inicio por un vídeo de fondo, tanto en Zerif Lite como en OnePress.

Como habíamos prometido, hoy le toca el turno a Hestia de nuestros amigos de ThemeIsle.

Paso 1: añadir soporte para cabecera multimedia

Antes que nada, y como siempre recalcamos, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo de Hestia se encuentran en esta entrada anterior.

Este primer paso es el mismo para todos los temas: tenemos que 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 esta porción de código:

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

Nada más y guardar los cambios, el panel Cabecera multimedia estará presente en nuestro personalizador.

Hestia - Soporte para cabecera multimedia

Paso 2: imprimir la cabecera multimedia en el tema

El código anterior, como ya vimos en los otros dos tutoriales, no sirve nada más que para decirle al tema que acepte este tipo de cabecera. Para que de hecho la cabecera tome efecto y se visualice en el lugar indicado, hay que agregar el código correspondiente.

Con la versión 1.1.39 de Hestia, por suerte añadieron los tan útiles hooks, que nos van a permitir imprimir código en el lugar necesario mediante una simple función. En el archivo functions.php pegamos lo siguiente:

function hestia_child_video_header() {
 if ( has_custom_header() ) :
 the_custom_header_markup();
 endif;
}
add_action('hestia_before_header_hook','hestia_child_video_header');

Como vemos, el hook usado es hestia_before_header_hook, que sirve para añadir una acción justo antes de la cabecera del tema. Para más información sobre los hooks, ver esta entrada.

El código completo de functions.php quedaría de la siguiente manera:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array( 'bootstrap' ) );
}
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 hestia_child_video_header() {
 if ( has_custom_header() ) :
 the_custom_header_markup();
 endif;
}
add_action('hestia_before_header_hook','hestia_child_video_header');

Ahora sí podemos agregar un vídeo a nuestra cabecera multimedia de Hestia, no sin antes hacer los ajustes de estilo necesarios (de lo contrario, el resultado que veremos en pantalla no será para nada lindo).

Paso 3: aplicar estilos para la correcta visualización

En el archivo custom.css (preferiblemente) 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í veremos 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.

Sea que optemos por ocultar el botón de reproducción o no, siempre será recomendable añadir una imagen de fondo para que se muestre durante la carga del vídeo, o en su lugar en los dispositivos móviles.

Para darle estilos al botón de reproducción, primero añadiremos el siguiente código en el archivo functions.php:

function hestia_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', 'hestia_child_video_controls' );

Por último, añadimos el siguiente código CSS (el estilo del botón será similar al del tema predeterminado de WP, 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: 20px;
 top: 10px;
 -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: 1040;
}

.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;
}

Recordemos que para que el vídeo cuadre correctamente en la pantalla, la imagen de fondo alternativa tendrá que tener el mismo tamaño: 1920x1080px, en nuestro caso.

Tampoco olvidemos que los vídeos de fondo, de manera predeterminada y por una cuestión de compatibilidad, se desactivan en los teléfonos móviles, y se muestran en resoluciones que superen 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 hestia_child_video_settings( $settings ) {
  $settings['minWidth']  = 600;
  return $settings;
} 
add_filter( 'header_video_settings', 'hestia_child_video_settings' );

Nota importante: el procedimiento detallado en este tutorial requiere al menos WordPress 4.7 y Hestia 1.1.39 o superiores.

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