Cómo agregar video como fondo de pantalla completa en WordPress

Los videos son asombrosos, proporcionan medios más atractivos y capturan más emociones que las imágenes.

Hoy en día, más y más webmasters/marcas se están moviendo hacia la incrustación de videos como fondo completo en su sitio web. Sin embargo, la complejidad de incrustar el video en segundo plano requiere cierta experiencia técnica.

Para que todo sea simple y excelente para nuestros lectores, enumeraremos un complemento gratuito para incrustar videos en segundo plano y también veremos un tutorial detallado sobre cómo incrustar videos en segundo plano con configuraciones simples.

Nota: Se necesita algo de experiencia en codificación para comprender completamente el contenido. Siéntase libre de hacer preguntas en los comentarios, si algo parece confuso.

Complemento para agregar video como fondo de pantalla completa en WordPress

Los complementos son excelentes, brindan la funcionalidad requerida con unos pocos clics. Enumeraré algunos complementos antes de pasar al tutorial detallado sobre cómo incrustar videos en segundo plano usando codificación.

1. mb .YTPlayer para videos de fondo

Uno de los complementos de video populares para la integración de fondo. El complemento integra un reproductor personalizado dentro del elemento de la página.

Con el complemento, los usuarios pueden integrar fácilmente los videos en páginas y publicaciones. La instalación es simple y el complemento genera un código abreviado para una fácil integración.

El complemento no admite el diseño receptivo por completo.

Detalle completo y descarga | Manifestación

2. Slider Hero con efectos de animación

El motivo del complemento es permitirle incrustar un fondo de video en WordPress con efectos deslizantes. El complemento ofrece 11 animaciones de fondo, la capacidad de agregar música de fondo, integración de video de YouTube y Vimeo, etc.

El complemento es compatible con cualquier tema o editor de WordPress como Gutenberg, por lo que responderá y será rápido en todos los sitios web de WordPress.

Detalle completo y descarga | Manifestación

Ahora, viene la parte real. La siguiente parte requiere la codificación y el funcionamiento técnico de la plataforma WordPress.

La incrustación de video requiere muchos pasos. Repasemos los pasos uno por uno. Una vez que comprenda esos pasos, puede comprender cuán complicado puede llegar a ser algo simple.

1. Usando Div para hacer espacio para el video.

2. Obtenga el posicionamiento Div en la parte superior izquierda de la ventana gráfica en forma absoluta o fija. El siguiente paso es establecer su alto y ancho al 100% y luego establecer el índice z en 1. El índice Z define la profundidad del contenido.

3. Escalado de video div usando JavaScript.

4. La pantalla del monitor cambia de tamaño y vuelve a escalar el video cada vez que el usuario escala el video.

5. Asegúrese de que el código funcione en diferentes navegadores y sistemas operativos móviles.

Parece mucha codificación, pero usaremos un complemento personalizado simple para automatizar el proceso de incrustación de video en el fondo de las publicaciones o páginas de WordPress.

BGVIDEO: Descargar

Descargue el complemento y continúe con una instalación normal (al igual que la instalación de otros complementos).

Este complemento simple funciona en conjunto con el código abreviado y un código abreviado llamado "bgvideo" está disponible en el complemento. El shortcode actúa como una puerta de entrada para incrustar videos en cualquier página o publicación.

Antes de continuar, necesitamos alimentar algunos parámetros al shortcode para su funcionalidad completa.

Los parámetros son alto, ancho, mp4, webm, ogg, reproducción automática, bucle, silenciado y fijo. La altura y el ancho se refieren a la altura y el ancho del video, respectivamente. Los campos mp4, webm, ogg se refieren a la URL del formato de video respectivo. Es necesario que proporciones la URL de cada formato para que el video se ejecute en múltiples dispositivos sin ningún problema.

Adición de vídeos a la biblioteca multimedia

El siguiente paso incluye agregar videos a la biblioteca de medios. Asegúrese de agregar todos los formatos (webm, ogg, mp4) a la biblioteca de medios.

Con la ayuda de bgvideo, los códigos cortos de video se transforman en bgvideo.

El código abreviado del video se ve a continuación

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

No olvide eliminar el signo de porcentaje (%) frente al código abreviado de video y la etiqueta de anclaje.

Con la ayuda de bgvideo, el código anterior se transformará en el siguiente código

 [bgvideo ancho="1280" altura="720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  fijo = "no"]

El complemento cambia automáticamente el código abreviado del video al código abreviado bgvideo.

Hacer que el video sea transparente para el usuario

Con todo configurado, debe hacer un poco de magia en la propiedad CSS de la página. La razón es el hecho de que el contenido de la página dificulta la visualización del video.

El CSS eliminará el contenido de la página y permitirá que el video brille para sus visitantes.

Inserte el siguiente código CSS para que todo funcione bien.

#página{

fondo: ninguno;

}

Hay muchos otros ajustes que se necesitan para configurar completamente el fondo del video.

Envolver

La mejor apuesta para nuestros lectores es usar un complemento completo e ignorar la parte de codificación; la parte de codificación solo empeorará las cosas si no sabe codificar. Puede desviar la necesidad a sus desarrolladores, pero eso no es gratis.

Otra gran solución alternativa es el uso de GIFS animados como fondo. Hay dos razones que respaldan el uso de GIFS animados. El primero es el bajo uso de ancho de banda en comparación con el video y el segundo es de fácil instalación. Otra gran ventaja es que probablemente no tengas que preocuparte por la portabilidad y otros problemas de compatibilidad de dispositivos.

La animación se puede formar fácilmente usando CSS o cargar a través del cambio de fondo normal.

La complejidad del fondo del video es un poco superior y la comunidad de WordPress o el equipo central pueden tomar nota y hacer cambios en sus próximos lanzamientos.

Si tiene un video y desea convertirlo en un gif, hay recursos en línea que pueden hacerlo por usted. Pero los GIF convertidos no están optimizados y tienen mucho peso con ellos.

Y cuando necesite realizar ajustes en el video que planea insertar, puede encontrar algunos editores de video gratuitos excelentes. Es posible que deba cortar, recortar o hacer zoom en un video, agregar texto o probablemente ajustar el tema de color para que coincida con el estilo de su sitio web.

Si está en Mac, naturalmente, puede usar iMovie porque ya está preinstalado en su computadora (si no, puede obtenerlo gratis). Y si está en Windows, VSDC Free Video Editor es una excelente opción. Tiene literalmente todo lo que pueda necesitar, desde el conjunto básico de herramientas de división/recorte hasta ajustes preestablecidos de corrección de color y estilo de video. Además, es realmente poderoso cuando se trata de formatos y no necesitarás sacrificar la calidad del archivo de salida.

¿Crees que me perdí algo? Comenta abajo y cuéntanos.

*última actualización 25/02/2019