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

6 comentarios

OnePress - Tutoriales

Por: Caribdis.Net

Publicada: 12 de febrero de 2017

Hace unas semanas aprendimos a usar la nueva característica de WordPress 4.7, cabecera multimedia, en el tema gratuito Zerif Lite.

Como habíamos prometido, en esta oportunidad vamos a hacer lo mismo, pero con OnePress, otro tema de una sola página de los más populares del último año.

He aquí las instrucciones:

Paso 1: añadir soporte para cabecera multimedia

Como siempre que hagamos modificaciones o agreguemos nuevas funcionalidades, será necesario crear 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 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() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'onepress-style' ), wp_get_theme()->get('Version') );
}
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,
) );
?>

Tendremos, entonces, el panel Medios del encabezado en nuestro personalizador.

OnePress - Cabecera multimedia

Paso 2: imprimir la cabecera multimedia en el tema

Vale aclarar una vez más que  el código anterior por sí solo no hace ninguna diferencia y es necesario “llamar” a la cabecera multimedia desde el tema. Con OnePress haremos algo distinto de lo que probamos con Zerif Lite, ya que si bien OnePress también incluye hooks para extender la personalización mediante funciones, en el caso del vídeo de fondo necesitamos modificar un par de cositas en la plantilla de la sección Héroe.

Vamos a copiar entonces el archivo section-hero.php de la carpeta /section-parts/ del tema padre, a una carpeta (previamente creada) /section-parts/ en el tema hijo. Luego, lo abriremos con un editor de texto y buscaremos la siguiente porción de código:

<section id="<?php if ( $id != '' ) {
echo esc_attr( $id ); } ?>" <?php if ( ! empty( $images ) && ! $is_parallax ) {
?> data-images="<?php echo esc_attr( json_encode( $images ) ); ?>"<?php } ?>
class="hero-slideshow-wrapper <?php echo ( $fullscreen == 1 ) ? 'hero-slideshow-fullscreen' : 'hero-slideshow-normal'; ?>">

Y la reemplazaremos por lo siguiente:

<section id="<?php if ( $id != '' ) {
echo esc_attr( $id ); } ?>" <?php if ( ! empty( $images ) && ! $is_parallax ) {
?> data-images="<?php echo esc_attr( json_encode( $images ) ); ?>"<?php } ?>
class="hero-slideshow-wrapper <?php echo ( $fullscreen == 1 ) ? 'hero-slideshow-fullscreen' : 'hero-slideshow-normal'; ?>">
<?php if (has_custom_header()) :
echo '<div class="custom-header-media">';
the_custom_header_markup();
echo '</div>';
endif; ?>

Ahora sí, estamos en condiciones de agregar un vídeo de fondo en nuestro OnePress. Por supuesto que primero tendremos que aplicar los estilos correspondientes.

Paso 3: aplicar estilos para la correcta visualización

En el archivo style.css del tema hijo (recomendado) o en el recuadro CSS adicional del Personalizador, pegamos lo siguiente:

.custom-header-media video,
.custom-header-media iframe {
    position: fixed;
    left: 50%;
    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%);
}
.custom-header-media video {
    height: auto;
}
.custom-header-media img {
    position: fixed;
    width: 1920px;    
}
.hero-slideshow-wrapper:after,
.hero-slideshow-wrapper {
    background: transparent;
}
.section-about,
.section-counter,
.section-news {
    background: #fff;
}
.site-footer {
    position: relative;
    margin-bottom: -24px;
}
@media (max-width:639px) {
.custom-header-media img {
    max-width: 180%;    
}
}

Ahora sí podremos ver el vídeo de fondo, pero nos falta darle estilos al botón de reproducción.

En el archivo functions.php del tema hijo pegaremos el siguiente código:

function onepress_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', 'onepress_child_video_controls' );

Con esto usaremos los iconos de Font Awesome que también están integrados en OnePress, 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:

.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: 99;
}
.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 el botón para mejorar la accesibilidad.

Nota importante: Para una visualización óptima, la imagen de cabecera siempre debe estar presente (ya que se muestra en dispositivos móviles en lugar del vídeo), y debe tener unas dimensiones mínimas de 1920×1080 píxeles.

OnePress - Imagen de cabecera

También recordemos que los vídeos de fondo 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 onepress_child_video_settings( $settings ) {
  $settings['minWidth']  = 600;
  return $settings;
} 
add_filter( 'header_video_settings', 'onepress_child_video_settings' );
Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. 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.

6 Comentarios

  1. Yami

    Hola! quería saber si es posible y cómo poner texto también unos botones sobre el video para hacer más atractivo el hero. Ya que no me da las opciones y quería saber si había otra opción para hacerlo. Gracias de antemano.

    Responder
    • Caribdis.Net

      Hola, Yami.

      Gracias por tu comentario.

      Actualicé el código que va en el archivo section-hero.php, ya que difiere en las últimas versiones.

      De todas maneras, deberías poder editar los elementos de la sección Héroe de la misma manera que si tuviera una imagen o slider de fondo. Desde Personalizar > Sección: Hero > Diseño del contenido Hero.

      Saludos.

      Responder
  2. Verónica

    Hola,

    He hecho todo lo anterior para poner el vídeo en ese tema, pero en tablet no funciona si el vídeo es de Youtube. También me encuentro con el problema de que cuando voy a poner un vídeo de la galería, esta aparece vacía. ¿A alguien más le ha pasado? ¿Alguna solución?

    Responder
    • Caribdis.Net

      Hola, Verónica.

      La verdad, no sabría decirte la causa, podría ser algún conflicto con un plugin (probá desactivándolos uno por uno).

      Saludos.

      Responder
  3. Jaime

    Hola que tal, necesito tu ayuda por favor
    llevo como todo el dia xD pero bueno espero no haber desperdiciado mi tiempo ok aqui va
    buscando en todos lados, me toque con este blog, realmente hoy lo encontre, asi que es un descaro pedir este favor pero bueno, espero me perdones

    por lo que lei en los anteriores post (si es que no me he saltado nada) esto se puede aplicar para cualquier tema? creo que eso lo entendi, lei tanto los articulos de zeraf, como los de onepress y queria intentar hacer lo mismo que tu haz hecho pero con otro tema llamado https://wordpress.org/themes/squarex-lite/
    este tema lo ame, y he estado trabajando sobre el, despues de cambiar algunas cosillas queria poner el header como los que estas poniendo tu, pero al intentar, trate de cambiar ciertos nombres y usar otros datos para acomodar pero nada parece funcionar

    es posible usar el mismo procedimiento que estas usando para poner videos en el header, con otros temas? esa seria mi pregunta, perdona si no me entiendes, es mas de media noche y no se ni quien soy yo xD
    Saludos

    Responder
    • Caribdis Diseño Web

      Hola, Jaime.

      Sí es posible, pero tendrás que adaptarlo al código del tema, y seguramente hacer bastantes ajustes en el CSS.

      Saludos.

      Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It en Pinterest

Compartir esto

Compartir es agradecer

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