Zerif Lite: ¿Cómo mostrar un vídeo de fondo (sin plugin)?

42 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 22 de enero de 2017

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.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

42 Comentarios

  1. Jorge Navarro

    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

    • Caribdis Diseño Web

      Hola, Jorge.

      Fijate en esta respuesta.

      Saludos.

  2. Christofher

    Hola perdonen que vuelva a preguntar… como programo el botón rojo para llamar a un numero celular?

    • Caribdis Diseño Web

      Hola, Christofher.

      El formato es tel:+541198765432.

      Saludos.

  3. Caribdis Diseño Web

    Hola, Rodrigo.

    Soy amiga 😉

    Fijate en este tutorial. Tenés que aplicar un color de fondo sólido a las secciones.

    Saludos.

    • Rodrigo

      Muchas gracias por todo “amiga” 🙂
      ¡Sabes alguna manera para cambiar el orden de las secciones?

      • Caribdis Diseño Web

        Hola, Rodrigo.

        Fijate en esta respuesta.

        Saludos.

        • Rodrigo

          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.

          • Caribdis Diseño Web

            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.

  4. Rodrigo

    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.

    • Caribdis Diseño Web

      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.

      • Rodrigo

        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

        • Caribdis Diseño Web

          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.

          • Rodrigo

            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!

  5. MER

    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

    • Caribdis Diseño Web

      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.

  6. Carmen

    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!

    • Caribdis Diseño Web

      Hola, Carmen.

      Con este método, no es posible activar el sonido. Zerif PRO sí tiene esta opción (sin el botón).

      Saludos.

  7. Walter

    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

    • Caribdis Diseño Web

      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.

  8. Joan

    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.

    • Caribdis Diseño Web

      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.

  9. Martha

    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.

    • Caribdis Diseño Web

      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.

      • Martha

        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.

        • Caribdis Diseño Web

          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.

  10. Hernán

    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!

    • Caribdis Diseño Web

      Hola, Hernán.

      Hoy mismo lo actualicé, con el nuevo código debería funcionar.

      Saludos.

  11. Cynthia

    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!

    • Caribdis Diseño Web

      Hola, Cynthia.

      En la versión de WP.org eliminaron el hook zerif_before_header; podés usar en su lugar zerif_top_body. Ya lo corregí en la entrada (este funciona con las dos versiones de Zerif).

      Saludos.

      • Cynthia

        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.

      • Cynthia

        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!

        • Caribdis Diseño Web

          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.

          • Cynthia

            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!

  12. Carolina

    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

    • Caribdis Diseño Web

      Hola, Carolina.

      Fijate que no tengas activado el efecto Parallax (en Sección de título grande).

      Saludos.

      • Carolina

        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

        • Caribdis Diseño Web

          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.

  13. Carmen

    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

    • Caribdis Diseño Web

      Hola, Carmen.

      Borrá la carpeta /zerif-lite/ del servidor. Descargá el tema de aquí y luego instalalo desde Apariencia > Temas > Subir tema.

      Saludos.

      • Juan

        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.

        • Caribdis Diseño Web

          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.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!