Programa para hacer cabeceras de videos

Ejemplos de cabecera de vídeo

La declaración if de la parte inferior es para evitar que el vídeo sea más alto que la ventana gráfica real, lo que obligará al usuario a desplazarse para ver el vídeo completo. La desventaja de esto es que aparecerán algunos bordes negros a cada lado del vídeo, ya que la relación de aspecto ahora será incorrecta.

Sólo llamaremos a esta función si el navegador soporta HTML5-video y no es un dispositivo táctil, con la ayuda de Modernizr. Si no, sólo se mostrará la imagen. Esto se debe a que no queremos que un usuario de móvil se vea obligado a descargar el vídeo teaser grande, por lo que es más responsable darles sólo la imagen. No se perderán ningún contenido, ya que el vídeo teaser es sólo una versión abreviada del completo.

Cabecera con fondo de vídeo

Imprime un div que contendrá una imagen de cabecera si se establece una en el personalizador y también pondrá en cola el script wp-custom-header.js si se establece un vídeo en el personalizador. El script determina si el entorno admite vídeo, y si es así, mejorará progresivamente la cabecera sustituyendo la imagen por un vídeo.

Un botón para alternar el estado de reproducción/pausa del vídeo se renderiza automáticamente para ayudar a los usuarios que puedan estar distraídos o desorientados por el movimiento. La asistencia de voz también está disponible usando wp.a11y.speak, y al igual que el texto del botón, las cadenas pueden ser modificadas usando el filtro header_video_settings.

Para aliviar las preocupaciones sobre el ancho de banda, los vídeos sólo se cargan en la página principal para los viewports que tienen al menos 900 píxeles de ancho y 500 píxeles de alto. El tamaño máximo del archivo también está limitado a 8 MB; sin embargo, recomendamos encarecidamente que se utilicen archivos más pequeños siempre que sea posible.

Por defecto, los vídeos sólo se cargan en la página principal y sólo se muestra la imagen de la cabecera en otras páginas que llamen a the_custom_header_markup(). Los temas que necesiten mostrar el vídeo de cabecera en otras páginas que no sean la portada pueden hacerlo:

Cabecera de vídeo html

Una cabecera de sitio web que muestre imágenes en movimiento es poderosa. Añadir un vídeo a la cabecera de tu sitio web hace que éste destaque. La opción de cabecera de vídeo descrita en este artículo añade un vídeo silencioso a la parte superior de su sitio web.

¿Cómo puedo establecer diferentes cabeceras de vídeo en diferentes páginas? Sólo se puede añadir un vídeo, que se aplicará a todo el sitio. Sin embargo, puedes tener diferentes imágenes estáticas en diferentes páginas de tu sitio web.

¿Qué significa «procesando»? El mensaje «Procesando» significa que la carga se ha completado y que el archivo de vídeo se está codificando en un formato que se mostrará correctamente en todos los navegadores web. Este paso no debería tardar demasiado, pero si tienes una conexión lenta o has subido un archivo más grande, puede tardar un poco más.

¿Por qué mi cabecera de vídeo no funciona en el móvil? Las cabeceras de vídeo son compatibles con la versión más reciente del software de iOS y Android. Si la cabecera de vídeo no se reproduce en un dispositivo móvil, estos problemas pueden ser la causa:

Fondo de vídeo responsivo

WordPress 4.7 introdujo el concepto de cabeceras de vídeo integradas en el núcleo del software. Este elemento visual no es nada nuevo -lo hemos visto en innumerables sitios y temas- pero su incorporación al núcleo lo hace mucho más accesible que antes.

Las cabeceras de vídeo se consideran elementos decorativos, como las imágenes de cabecera, pero con movimiento. En este sentido, se reproducen automáticamente, se reproducen en bucle por defecto y no tienen sonido. Funcionan mejor cuando se combinan con una imagen, por lo que pueden mejorar progresivamente la experiencia cuando se admite el vídeo.

Una nueva etiqueta, the_custom_header_markup(), fue introducida en WordPress 4.7. Unifica la visualización de imágenes de cabecera y vídeos de cabecera en un solo paso. Muestra un div que contiene la imagen de cabecera y pone en cola el script necesario para el vídeo.

Cuando WordPress decide si mostrar o no un vídeo, mira un valor pasado a través del filtro is_header_video_active(). Si el valor es verdadero, muestra el vídeo, de lo contrario no lo hace. El código siguiente extenderá el vídeo a todas las páginas individuales, no sólo a la página de inicio.

En programas