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.
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.
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.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola buena tarde… gracias por tus aportes, me siguen ayudando bastante… hice lo que propones en el primer momento}, agregue el código, pero sale la leyenda “No ha sido posible comunicar con el sitio para comprobar los errores fatales, así que el cambio de PHP se ha revertido. Tendrás que subir el cambio a tu archivo PHP por otros medios, como por ejemplo usando SFTP”.
Alguna sugerencia…
Gracias por tu ayuda
Hola, Jorge.
Fijate en esta respuesta.
Saludos.
Hola perdonen que vuelva a preguntar… como programo el botón rojo para llamar a un numero celular?
Hola, Christofher.
El formato es
tel:+541198765432.Saludos.
Hola, Rodrigo.
Soy amiga 😉
Fijate en este tutorial. Tenés que aplicar un color de fondo sólido a las secciones.
Saludos.
Muchas gracias por todo “amiga” 🙂
¡Sabes alguna manera para cambiar el orden de las secciones?
Hola, Rodrigo.
Fijate en esta respuesta.
Saludos.
Gracias por tus ayudas , me han servido mucho.
¿Cómo puedo agregar un widget a una sección que no posea esta característica?
por ejemplo: agregar un widget en la sección: llamada a la accion
Se ante mano, muchas gracias.
Hola, Rodrigo.
No es posible agregar widgets en las secciones de llamado a la acción. Podés agregar una sección nueva con un área de widgets, o bien usar hooks para añadir contenido en partes específicas (encontrarás la lista completa en el archivo
/wp-content/themes/zerif-lite/inc/hooks.php.Saludos.
Hola Amigo. Brillante tu solución pero tengo unas consultas para agregar al css.
1- El video sigue mantenidendo el alto del template, me parece que son 500px, ¿Cómo hago para que muestre los 1080p que es lo que corresponde?
2-Por defecto el template muestra una semitransparencia de color negra sobre el video porque así lo hace sobre las imágenes al parecer. ¿Cómo elimino esa transparencia? ya que necesito que mi video se vea tal cómo es.
De antemano, muchas Gracias por tu pronta respuesta.
Hola, Rodrigo.
Si no entendí mal, te referís al área de la sección de título grande. Tendrías que usar el siguiente código:
.header-content-wrap { height: 100vh; }Y para eliminar la opacidad del fondo está este tutorial.
Saludos.
Muchas gracias por tu respuesta.
Fuiste sertero con lo que necesito.
Mi otra duda:
Cómo logro que el video se vea siempre al 100% al ahumentar o disminuir el tamaño en el navegador (zoom 80% o 10% en chrome por ejemplo). Porque al hacer esto se hace pequeño el video y he visto en otros sitios web que esto no ocurre.
Muchas gracias
Hola, Rodrigo.
Usá el siguiente código:
.wp-custom-header img, .wp-custom-header video, .wp-custom-header iframe { position: fixed; left: 50%; top: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -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; }Saludos.
Muchas Gracias nuevamente amigo.
Sin abusar de tu buena gentileza, me gustaría saber como poder ocultr o borrar el video de este tutorial de las otras secciones de la página, ya que aparece por ejemplo en el formulario de contacto y con transparencia en otros lados. Necesito que sólo se vea en el header.
Qué código más podría agregar?
Muchas gracias!
Muchas Gracias por tu tutoriales ♥
Un pregunta, tines algún tutorial donde enseñes cómo poner la cabecera multimedia para que abarque el menú, como lo tines tu en la home de tu web.?
en mi caso queda debajo del menú.
Gracias
Hola, Mer.
Gracias por tu comentario.
El menú está sobre la cabecera, pero tiene un color sólido (blanco). Podés cambiarlo a transparente con CSS, pero quedará así cuando desplaces la página (se superpondrá con los contenidos). El código es:
.navbar { background: transparent; } .header.header > .navbar { -webkit-box-shadow: none; box-shadow: none; }Saludos.
Hola!!! muchísimas gracias! funcionó perfecto! pero te quería perguntar si se le puede agregar el sonido del video y un botón para encender y apagar ese sonido.
Saludos y gracias!
Hola, Carmen.
Con este método, no es posible activar el sonido. Zerif PRO sí tiene esta opción (sin el botón).
Saludos.
Hola amiga muy interesante tus manuales, en el mio funciono bien , mi pregunta es como hago para agregar videos de fondo independiente en otras paginas ..
Gracias
Hola, Walter.
Gracias por tu comentario.
En ese caso, lo más conveniente es usar un constructor de páginas, con el que puedas agregar una sección para el encabezado y aplicarle un vídeo de fondo. Elementor tiene esta característica.
Saludos.
Hola, primero agradecerte por la información uso Zerif Lite y funcionó a la perfección! y me surgió la duda ya que en otra web uso “Hestia” de ThemeIsle se podría incorporar la cabecera multimedia a este tema también? Saludos.
Hola, Joan.
Gracias por tu comentario.
Por supuesto que se puede. Básicamente es el mismo código, pero hay que imprimir la cabecera en el archivo
header.php, además de ajustar un poco el CSS.Más adelante haré un tutorial con los pasos completos.
Saludos.
Tengo la versión Pro de Zerif activa con video, en la pc funciona bien, pero en el teléfono, no reproduce el video, ya intenté con slider también, pero sólo se ve la imagen. ¿tienes idea qué puede ser?
PD: Muchas gracias por toda tu info, está genial.
Hola, Martha.
Los fondos de vídeo se desactivan en móviles por una cuestión de compatibilidad. El slider sí debería verse correctamente.
Saludos.
Tienes razón, el Slider si funcionó. ¿y no existe una alternativa para mantener el vídeo para PC y Slider para móvil? Me gustaría conservar ambos, muchas gracias por tu respuesta. De verdad que estoy agradecida.
Hola, Martha.
Me temo que en el caso de este tema, no es posible. Solo podés elegir una imagen alternativa (Miniatura de vídeo).
Saludos.
Hola, hice todos los pasos. Me aparece la opción de cabecera multimedia pero al subir videos o una imagen no aparece en la página. Solo se ve la imagen de fondo que se coloca desde ajustes generales, o el color de fondo cuando quito la imagen de fondo. Estoy en la versión actual de WordPress y Zerif Lite. ¿Es posible que el post no este actualizado para visualizarlo en esta versión? he seguido todos los pasos y los anteriores tutoriales me han funcionado. Gracias!
Hola, Hernán.
Hoy mismo lo actualicé, con el nuevo código debería funcionar.
Saludos.
Hola, primero muchas gracias por tus tutoriales, en segundo lugar me gustaría comentarte que no logro hacer que se vea el video, ni el fondo que pongo desde el Header Media, hasta ahora he podido hacer todos los cambios que quería y solo esto no esta funcionando. Uso el Zerif Lite descargado desde WordPress, edite functions.php y agregue los códigos a al CSS personalizado. No se que hago mal.
Saludos
Muchas gracias!
Hola, Cynthia.
En la versión de WP.org eliminaron el hook
zerif_before_header; podés usar en su lugarzerif_top_body. Ya lo corregí en la entrada (este funciona con las dos versiones de Zerif).Saludos.
Muchas gracias, ahora si me agrega la imagen o video pero queda arriba del Big Title, no como lo tienes en el ejemplo. Muchas gracias.
Hola, muchas gracias por lo rápida de la respuesta, lamentablemente ahora funciona, pero me deja el video arriba del big title, no como en tu ejemplo. Me gustaría saber, por si esto no me funciona, como podría poner backgrounds aleatorios para que vayan cambiando?. Muchas gracias!
Hola, Cyntia.
No olvides agregar los estilos CSS para que se vea correctamente. Si los agregaste pero no ves los cambios, puede ser que el navegador no esté cargando la hoja de estilos actualizada. Limpiá historial y cookies y recargá la página.
Para usar un slider en lugar de la sección de título grande está este tutorial.
Saludos.
Estimado, muchas gracias nuevamente. Limpie el historial, etc. y no funcionó, pero se me ocurrió cambiar el orden del código css y puse [ .wp-custom-header .wp-custom-header-video-button {
display: none; } ] arriba y quedó perfecto, como en tu ejemplo.
Muchas gracias!
Hola ,gracias por tu pos muy completo ,pero realice todo el procedimiento y el vídeo no me lo muestra en la cabecera sin no en la sección de contacto
Hola, Carolina.
Fijate que no tengas activado el efecto Parallax (en Sección de título grande).
Saludos.
Genial gracias ,tengo otra consulta adicione con un catologo con Huge It Catalog ,estoy intentanto que la imagen de los productos tengan una dimension de 320×320 y no 275×320 he mirado los stylos con mozilla firebug logro modificarlos en esta aplicacion pero a momento de añadir las modificaciones no ocurre nda nose si podrías orientarme para poder ubicar el archivo de zerif lite y poder hacer la modificacion
Hola, Carolina.
La verdad, no sabría decirte porque no conozco el plugin. Si agregaste los códigos en el recuadro CSS adicional pero no tomó los cambios, probá con la declaración
!important. Ej:img { width: 320px !important; }Saludos.
Hola, siempre les lee sus comentarios y sugerencias sobre este tema. Ahora tengo un problema estoy traslanda de un hosting a otra la web y me sale este error
Parse error: syntax error, unexpected ‘function’ (T_FUNCTION) in /home/foods/public_html/1000foods/wp-content/themes/zerif-lite/inc/jetpack.php on line 1
no se q hacer?
Gracias por su ayuda
Hola, Carmen.
Borrá la carpeta
/zerif-lite/del servidor. Descargá el tema de aquí y luego instalalo desde Apariencia > Temas > Subir tema.Saludos.
Me ocurre el mismo fallo, pero no puedo borrar la carpeta zerif-lite del servidor ya que la web ya está creada y finalizada en wordpress, ¿me podrias ayudar?, gracias.
Hola, Juan.
Si tenés acceso a un administrador de archivos en el panel de control de tu hosting, podés subir el ZIP y descomprimirlo dentro de la carpeta
/wp-content/themes/para que reemplace los archivos existentes.Saludos.