---
title: "OnePress: ¿Cómo mostrar un vídeo de fondo (sin plugin)?"
url: https://caribdis.net/2017/02/12/onepress-como-mostrar-un-video-de-fondo-sin-plugin/
date: 2017-02-12
modified: 2021-02-08
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "OnePress"
tags:
  - "español"
  - "gratuito"
  - "OnePress"
  - "tema"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2016/12/onepress-tutorial.jpg
word_count: 683
---

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

Hace unas semanas aprendimos a usar la nueva característica de **WordPress** 4.7, cabecera multimedia, en el tema gratuito [**Zerif Lite**](https://caribdis.net/2017/01/22/zerif-lite-como-mostrar-un-video-de-fondo-sin-plugin/).

Como habíamos prometido, en esta oportunidad vamos a hacer lo mismo, pero con [**OnePress**](https://wordpress.org/themes/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](https://caribdis.net/2016/12/11/onepress-como-editar-los-creditos-del-pie-de-pagina/).

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](https://caribdis.net/wp-content/uploads/2017/02/onepress-cabecera-video.png)

#### 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 <?php if ( ! empty( $images ) && ! $is_parallax ) {
?><?php } ?>>
Y la reemplazaremos por lo siguiente:
<section <?php if ( ! empty( $images ) && ! $is_parallax ) {
?><?php } ?>>
<?php if (has_custom_header()) :
echo '<div>';
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 1920x1080 píxeles.

![OnePress - Imagen de cabecera](https://caribdis.net/wp-content/uploads/2017/02/onepress-imagen.png)

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' );