Video de fondo en mi sitio

Contenidos

En el último proyecto en el que participé me encontré con el problema de que estaba trabando con un creador de páginas, de WordPress, que verdaderamente me encanta, Live Composer, que si bien es magnífico y algún día haré un articulo sobre él, tiene un problema, el video de fondo en las secciones no reacciona como un cover, característica que llena la pantalla con el objeto. Y eso me dio la idea de escribir el recorrido hacia la solución.

“Spoiler alert” este va a ser un tutorial de HTML y CSS pero prometo que será fácil y enfocado a WordPressy puede ser con WordPress en el Gutenberg o con un constructor de páginas.

Vamos a usar este video otra vez…

Consideraciones

Siempre es importante tener claras las consideraciones y limitantes de cada ejercicio y por eso empezamos por aquí:

El video debe ampliar el mensaje del sitio no ser meramente ilustrativo. Esto significa que si el video no es narrativo, probablemente es mejor cambiarlo por una imagen de fondo, porque un video innecesario es un gasto de ancho de banda para el usuario, sobre todo para dispositivos móviles.

Un video de peso apropiado es algo que se encuentra como máximo en lo 5mb no más, aunque en los equipos de escritorio tal vez podemos darnos una licencia diferente, en los dispositivos móviles esto puede ser perjudicial.

“Menos es más” cuando se trata del ancho de banda del cliente.

Ka’ de xaeoç

Por una cuestión de cortesía tácita en internet los videos en auto-reproducción se establecen siempre en mute. Algunos usuarios odian que una pestaña de repente empiece con una reproducción de audio y eso siempre hay que tenerlo en cuenta al momento de establecer una auto-reproducción con sonido. En otra ocasión haremos algo de Javascript para crear botones que quiten el mute.

El video tiene un tiempo de carga y por supuesto entre más pesado sea este, más tiempo de carga requiere… Por eso se establece una imagen de fondo para que sea visible en caso que el tiempo de carga deje espacio vacío, lo óptimo es sacar un cuadro del propio video.

Si bien el video no debe ser ilustrativo tampoco tiene que desarrollar una línea narrativa propia que distraiga del mensaje real del sitio, por eso un largo excesivo no es lo adecuado. Ahora bien un video muy corto da la sensación de ser repetitivo y sin objetivo. Lo que se aconseja es una longitud que ronde entre los 12 y los 30 segundos, para que tenga presencia pero que no secuestre la narrativa del sitio.

Video

<video src="" autoplay loop playsinline muted poster=""></video>

De momento no le pondremos las url’s para poder explicar cada uno de los atributos de la etiqueta video.

La etiqueta video “abre” con <video> y cierra con </video>, el primero dice aquí empieza un video y el segundo dice acá termina… Pero para hacer funcionar el video tenemos los atributos que se escriben en la apertura de la etiqueta dejando un espacio después del nombre de la etiqueta y antes del “mayor que” ejemplo: <video atributo> o <video atributo="">. Aquí hay que hacer una pausa para explicar que si tenemos sólo una palabra sin el igual y las comillas es un atributo boleano y si tenemos un atributo con el igual y las comillas es un atributo con su valor, son iguales pero eso es para otra clase.

Atributos

Los atributos son la forma de entregarle funciones a la etiqueta, en este caso al video, y para nuestro ejemplo solamente explicaré los visibles en nuestro ejemplo puesto que hay muchos más en el HTML.

<video src="" autoplay loop playsinline muted poster=""></video>

src o source que en español significa fuente es de donde tomamos realmente el video. El video tiene que ser un video .mp4, .webm o .ogv (únicas extensiones aceptables para web) y tienen que está posicionado en algún lado accesible del servidor. Esta dirección o URL se le conoce como ruta o path.

Ejemplo: https://xaeoc.com/wp-content/uploads/2021/08/video.mp4

Cuando se llama un video desde WordPress lo puedes encontrar en la sección de medios:

Video de fondo en mi sitio

Y eso nos da el src="https://xaeoc.com/wp-content/uploads/2021/08/video.mp4" que vamos a usar.

<video src="https://xaeoc.com/wp-content/uploads/2021/08/video.mp4" autoplay loop playsinline muted poster=""></video>

autoplaycreo que se define sólo bastante bien, hace que el video comience a reproducirse sin tener que darle tal orden manualmente.

loopla traducción textual es bucle en español y esto hace que el video reinicie la reproducción apenas termine el tiempo total del video, lo que hace infinita la reproducción.

mutedeste atributo hace que el video inicie sin sonido y esto es obligatorio en casi todos los navegadores si queremos hacer un autoplay, este es un standard que se estableció por los malos usos de automatizar los videos con sonidos en los sitios.

poster este es un atributo que nos permite poner una imagen por si el video no a terminado de cargar y también para que no se muestre el primer cuadro del video si no se le a dado play. La imagen igual que con el video podemos encontrarla en la sección de medios y si le damos click a la imagen que queremos podemos encontrar el botón de copiar url.

<video src="https://xaeoc.com/wp-content/uploads/2021/08/video.mp4" autoplay loop playsinline muted poster="https://xaeoc.com/wp-content/uploads/2021/08/vela-optimized.png"></video>
Video de fondo en mi sitio
Imagen para el video.

Finalmente tendremos esta imagen como poster del video para que en caso de que nuestro video se tarde en cargar o no se pueda reproducir no quede un espacio negro o bien lo que se haya establecido en el css del sitio.

Siempre hay que tener claro que cualquier cosa de estilo que el sitio posea es algo que se establece en el CSS.

Si insertamos el video desde el código que acabamos de hacer tendremos lo siguiente:

wordpress bloque de html

playsinline

Dejé a propósito el atributo playsinline para el final porque es uno que no entendía bien y me parece muy interesante porque es el que hará posible que este código funcione de manera adecuada en dispositivos móviles.

Yo tuve que buscarlo porque no me era conocido así que en mi búsqueda encontré un artículo de CSS-Tricks que es una de mis revistas favoritas de internet para consulta de CSS y encontré el artículo “What Does `playsinline` Mean in Web Video?” en el que lo explica muy bien y conciso que yo voy a sintetizar por cuestiones prácticas.

En los dispositivos móviles si usamos la etiqueta video sin el playsinline el video se despliega en una caja de luz que bloquea el fondo y se hace de pantalla completa:

Video tomado de: What Does `playsinline` Mean in Web Video?

Cuando aplicamos el playsinline el objeto se ejecuta de manera “normal” o para decirlo mejor se ejecuta de igual manera que en un desktop o laptop, que el objeto se mantiene en el espacio en el que se puso:

Video tomado de: What Does `playsinline` Mean in Web Video?

CSS

Para poder ponerlo como el fondo de lo que sea primero tenemos que posicionarlo de alguna manera como el objeto de fondo… En particular para mi proyecto no necesité mucho más que lo que explicaré a continuación…

Con unos cuantas propiedades de CSS que vamos a poner en línea para no complicarnos lo pondremos como un objeto de fondo. Vamos a agregar un atributo nuevo al css style="" en el que vamos a incluir todas las propiedades que igual que antes vamos a explicar propiedad por propiedad.

<video src="https://xaeoc.com/wp-content/uploads/2021/08/video.mp4" autoplay loop playsinline muted poster="https://xaeoc.com/wp-content/uploads/2021/08/vela-optimized.png" style="width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; object-fit: cover; "></video>

width: 100vw; height: 100vh; estas dos propiedades son las dimensiones que dan el anchoy el alto, respectivamente hablando, lo que tiene de particular son las unidades de medida: vw Visualport Width y vh Visualport Height. Esto significa alto o ancho del Puerto de Visualización. Entiendase el puerto de visualización en donde se muestra el video que en el caso de los sitios web es el navegador, de dispositivo o de computadora, y lo que significa la unidad de medida (100) es el 100% del ancho o el alto del puerto de visualización.

position: fixed; top: 0; left: 0; La posición fija hace que el objeto nunca se mueva… Y el top en cero dice que el objeto video no tenga espacio entre lo más arriba del navegador y el objeto, el left lo mismo pero con el lado izquierdo del objeto.

object-fit: cover;

Esta es la estrella de este código. El object -fit automatiza el reponsivo del video.

Le indica al contenido de <img> o <video> que debe redimensionarse para ajustarse al contenedor y le establecemos el valor cover .

…se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.

Mozilla Dev docs

Si gustan leer más al respecto pueden revisar los documentos de desarrollador de Mozilla.

Espero sea una obviedad decir que el css puede ir en una etiqueta de style al inicio de la página o dentro de un archivo de css aparte en caso de que no estén haciendo este ejercicio en css…

Resultado:

El resultado que voy a incluir viene con un texto y con algo sobre él que el CSS para que esto suceda lo encontrarán dentro del Codepen:

See the Pen Video de fondo completo by Ka’ de Xaeoc (@xaeoc) on CodePen.

Si dan click en HTML o CSS verán respectivamente como se aplicó… ¡Espero les guste y siempre son bienvenidos sus comentarios!

Referencias:

https://developer.mozilla.org/es/docs/Web/HTML/Element/video

https://developer.mozilla.org/es/docs/Web/CSS/object-fit

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

http://thenewcode.com/16/Scrolling-HTML5-Video-Behind-Content#vidscrollcontent

otros artículos
¿Estás listo para asesorarte sobre tus necesidades web?
Ponte en contacto hoy y recibe una consulta gratuita.

¿Estás listo para asesorarte sobre tus necesidades web?

Ponte en contacto hoy y recibe una consulta gratuita.

Solicite consulta o cotización

Request a consultation or quote