Video de Fondo con HTML5 y CSS3

Aprende a colocar como Fondo o Background de tu sitio web, un vídeo. utilizaremos muchos estilos de css3, entre ellos flexbox para poder, ubicar tanto el contenido como el vídeo.
PARA DESCARGAR VÍDEO:
videos.pexels....
DEVELOTECA (Canal de KZbin):
/ dimit28
CÓDIGO FINAL DEL PROYECTO:
github.com/Faz...
VISITA MI SITIO WEB: PARA MÁS CURSOS Y TUTORIALES
www.faztweb.com
blog.faztweb.com
WEB HOSTING: Namecheap Hosting
goo.gl/jmLWvq
SIGUE A FAZTWEB.COM:
/ fazttech
/ fazttech
gitter.im/Fazt...
goo.gl/q5UAoo

[@danielpineda3824]

6:40 La etiqueta video debe tener los siguientes atributos para q se reproduzca automaticamente:

[@fran7318]

muchas gracias!

[@appencuestas4014]

Para habilitar el autoplay en chrome solo agregar 'muted' al parametro autoplay del video, debe quedar 'muted autoplay loop', a mi me funcionó, de nada

[@pedroparradovargas4826]

gracias

[@R3Alonso]

muchas gracias !

[@deinerduque2119]

Eres Dioos!!

[@juanrodrigoramos1581]

gracias.

[@vicomaya7448]

MUCHAS GRACIAS. A veces funcionaba, otras no, con muted siempre funciona.

[@togakurerotten4801]

Fazt cada vez que veo un video de tu canal aprendo algo nuevo, muchas gracias por compartir, este proyecto estuvo genial!!

[@alvarocano3116]

Es con estos proyectos pequeños los que te motivan a practicar y ponerlos en práctica, sigue poniendo más por favor, gracias por el vídeo!

[@NivelnegroBlogspotNivelNegro]

Como le dijeron a Berns: "Realmente eres el rey de reyes", impresionante como siempre Fazt

[@jenniretricardo8812]

Así quedo mi ejercicio 👉 jenricardo.github.io/html_video_bg/ Los archivos 👉 github.com/jenricardo

[@hantra0294]

Te quedo muy bien, aunque trato de hacer lo mismo perp mi codigo css no se aplica correctamente y eh estado tratando de encontrar la falla unu

[@areleoloyv]

Mientras estaba maldiciendo y hablando sobre la reputación de la madre de quien propuso los Estándares de CSS me di cuenta que el resultado varia un poco cuando el contenido de .header-content no es suficiente para ocupar todo el ancho. La solución muy vaga que se me ocurrió fue añadir un 'width: 100%' y pude solucionar mi problema dejando la clase como se ve: .header-content{ width: 100%; z-index: 2; } Estoy seguro que hay mejores formas de resolverlo y que pueda ser utilizado en mucho más casos. Muchas gracias por su ayudar a toda una comunidad (y)

[@mikesalinas5222]

Gracias ocupaba parte del código... ::before, el mejor código de todos para útilizarlo para cuando queremos imagenes o vídes detrás de un background. Saludos.

[@maxg.6512]

SOS UN GENIO, ME ENCANTA LA FLUIDEZ QUE ESCRIBE...

[@taniaverthi.]

Para los que tenemos un poco de conocimiento es útil . Gracias!

[@ignacioja]

Buenisimo el video! y muy noble lo tuyo al comentar sobre el otro sitio web (incluso al decir que tienen el contenido mejor estructurado, aunque no te quita merito a tu trabajo :) ). Saludos

[@AlanDev95]

Excelente video, 2021 y sigues salvando proyectos! jajaja ¡saludos!

[@silvanagualoto2117]

El mejor justamente lo que buscaba todo una semana gracias.

[@eche2003]

Justo tengo que hacer eso para una página amiga , siempre un genio explicando :-) , sigue asi

[@enmanuelrondon5545]

gran video! no tienes un tutorial como hacerlo en react??

[@marianobarrionuevo2278]

muy bueno el video, lo estoy probando para wordpress y hasta ahora funciona, solo tengo un inconveniente a la hora de recargar el sitio con control alt 5 en mac y es que no lo reproduce automaticamente podrias indicarme si a ti te pasa lo mismo?

[@angelbello2753]

hola excelente vídeo felicidades... en el vídeo observo que utilizas 2 estilos en una clase no sabia que eso se podía , se pueden mas ?.

[@FaztTech]

Hola Angel, si por supuesto, de hecho vas a ver esto muy seguido en los frameworks de CSS3.

[@angelbello2753]

Excelente ..gracias y Bendiciones

[@martinflores9611]

felicidades siempre veo tus vídeos están muy bien echos saludos fazt

[@iPhoeniix26]

Me encantan tus videos fazt!!!

[@FaztTech]

Gracias Paul.

[@mardinamica]

Hola , gracias por tu video. Una consulta, ¿ Será posible poner imágenes de un video en vivo? desde una webcam por ejemplo? Gracias

[@bryanvilchez1282]

Uso el mozilla firefox y el video no reproduce si alguien sabe el por que me gustaria que me ayudaran pls

[@luistritom8421]

Amigo una consulta. Se puede insertar en el preload una animación simple hacha por uno mismo?. En que formato deberia estar?. Te agradeceria alguna info al respecto. Gracias por compartir. Saludos.

[@TheAbinanye]

Estaría mejor si el video está en KZbin o en otra plataforma. Like brother

[@FaztTech]

Hola Angel, si es una idea muy buena, pero solo tienes que cambiar el atributo src del vídeo y colocar la URL en donde este almacenado, y eso prácticamente seria todo los cambios necesarios :D

[@michelstefannyperezuribe3638]

No se cuantas veces dijiste la palabra video XD , buen video

[@lacasagamer931]

super facil, bien explicado, gracias

[@eslogodesign]

Pregunta, ¿hay una manera por ejemplo, de poner que aparezcan los botones hasta que el video llegue a su fin?, es decir visualizas el video y cuando acabas de reprodirlo te aparecen el botón y la información. Está muy bueno el tuto!

[@eslogodesign]

Aunque no he visto cómo, he leído que con jquery se pude... ¿Sabes algo de ello? gracias!

[@lh536]

que buen video! Felicitaciones... tengo una pregunta... no me funciona el video en dispositivos móviles; sabes la razón? Gracias.

[@odaliscueto4263]

socio tiene que explicar cada etiqueta e ir ejecutandola para ir viendo la diferencia por que si lo explicas asi sera solamente par personas con conocimientos amplios de esta, con esto no estoy diciendo que lo haces mall pero mas despacio y mas enseñanza

[@FaztTech]

Gracias por el feedback lo tendré muy en cuenta para futuros vídeos :)

[@avila176]

@@FaztTech disque socio jaja

[@ironpolux]

@@FaztTech Espero hayas tenido en cuenta el consejo de odalis. Bueno depende de cual sea tu publico objetivo veteranos del web o gente que esta en proceso de aprendizaje. Si alguien esta aprendiendo lo mas seguro es que no llegue ni a la mitad del video. En cualquier caso siempre es importante mencionar que base de conocimiento se requiere para poder aprovechar el video, quizas alli pudieras agregar links a los tutoriales que ofrecen esa base conocimiento, hasta ganas click :D.

[@thesirfm]

Que tal si pones el video en velocidad 0.5 :v

[@WilliamOContrerasT]

Hola buen dia. Excelente tu explicación. Sin embargo. Quisiera saber si me puedes ayudar a que esta pagina intro pueda verse en el teléfono celular. Gracias

[@mauriciovillalba1065]

Tengo el mismo problema

[@sax5590]

Hola Fazt, en el header-content pones : 50px, pero si lo quiero hacer más grande se me mueve a la izquierda. ¿Alguna solución?

[@marcmedrano7351]

text-align: center; line-height: (la altura de tu div);

[@davidmmarshall926]

gracias ! te felicito !!!

[@eritopape3195]

tengo una consula mi bro, si utilizo un video de fondo y estoy configurandola en una pantalla 1080p como podria saber si se vera expandida en una pantalla 2k o 4k

[@edwinrafaelhenriquezh2085]

Amigo, una pregunta. Eso es posible con Next.js

[@otpkatarina3493]

Eres un master! :D

[@FaztTech]

Gracias Radel :D

[@moisesosegueda2048]

Y si yo quiero subir mi pagina a la web por ejemplo donde puedo alojar mi video y poner el video desde una url se puede??

[@gonzalomtz]

es posible poner un video de fondo desde una url? osea que no lo tenga descargado

[@ginnozavala4201]

codigo para que funcione en el chrome , de nada :)

[@tobidelloni]

te amo

[@francofrigerio2666]

Y en Brave tambien!.. muchas gracias!

[@MrEzeedge]

todavia no logro como hacer para que el video sea compatible con todos los navegores.

[@yuf8515]

Ya entendí porque Fazt.

[@jemccstarr3751]

Quiero decsrgar un video de fondo como lo hago

[@fula5]

El video ya no se encuentra disponible, pero está aquí : kzbin.info/www/bejne/pnSbfHqun62bodEsi=N7YqgCP3yJqnvrBg

[@javiromero4067]

y si quiero que el video este con sonido como le hago

[@tobiaspossetto10]

Como hago para que cuando la pantalla disminuya el video se adapte?

[@tobiaspossetto10]

Hola, no se repite el video aunque use loop

[@Melon123321xd]

excelente ! Gracias

[@williamm.p.136]

cuando tutorial con css grid? agregar imagenes? agregar videos? posicionar elementos

[@FaztTech]

sí es un tema bastante actual, así que espero darme tiempo y publicar varios ejemplo de CSS grid :D. ¡Saludos!

[@darkarlax]

Alguna recomendacion para convertir el video de fondo, Full Responsive?

[@CreadoresenFacebook]

con tubular.js

[@Tramadigital]

Hola buen dia porque no corre el video en google en firefox anda perfecto pero en google no reproduce el video ..

[@carlosmartinez6281]

como hago para escuchar el sonido del video de fondo, alguien sabe?

[@teti5555]

gracias

[@motivationdiaria]

puse el autoplay y el loop y no me funciona el video no se quiere reproducir alguien que me ayude

[@jpierodot]

Gracias por el vídeo! ¿tienes vida social? jajaja xD!

[@carlosmartinez6281]

No me funcionaba el video hasta que le agregue muted al inicio de autoplay loop y se arreglo

[@rafaelvaldiviezoancajima4736]

gracias bro me funciono

[@ricardorios3412]

mil gracias crack

[@DIYOmarAcevedo]

copie y pegue tu codigo y no funciona, no reproduce el video

[@Warrypro]

Buen video, aunque se puede optimizar y reducir mucho el código usando pseudo elementos.

[@wassaman4928]

¿podrias publicar esos pseudo elementos para los que no saben?

[@jser.rodriguez]

Fazt eres colombiano?

[@FaztTech]

No amigo, pero si tengo varios amigos colombiano :)

[@Carlos-iq4th]

7:00 momento Latam

[@speedgonzalez72]

hola, lo abri con google ghrome y no reproduce el video ,en los demas navegadores si , porque?

[@CreadoresenFacebook]

¡Hola Edgard! Básicamente las nuevas políticas sobre el Autoplay se pueden resumir en lo siguiente: El autoplay en vídeos silenciados siempre se permiten El autoplay en vídeos con sonido se permite si: El usuario ha interaccionado con el dominio (ha hecho clic, por ejemplo). En escritorio, el mínimo del índice de interacción con contenido multimedia ha sido alcanzado, lo que significa que el usuario ha reproducido vídeo con sonido anteriormente. En móvil, el usuario ha añadido su sitio a su pantalla de inicio. En resumen..ya no funciona el autoplay igual que antes...

[@CristalMercadoR]

En mi caso no se quiere reproducir el vídeo aun colocándole autoplay y loop, como puedo solucionarlo?

[@CreadoresenFacebook]

con javascript,personalmente yo lo hago usando librerías js,tubular.js por ejm y me queda asi www.misionrenuevo.com/

[@milito-no.k3149]

el video no se puede descargar,.enlace caído

[@ulisesalbores2794]

El texto y el boton se mueven a la derecha, alguna solución? Buen video por cierto ^^

[@thesirfm]

Pensé que era un video de 20 minutos con un video de html y css de fondo xdd

[@MiguelGomez-hh6fd]

Ubuntu Mate ???

[@FaztTech]

Así es :D

[@eduardosanchez5579]

No me funciono hasta que decidí descargar los archivos desde tu pagina, no se porque si lo compie todo igual pero solo asi me funciono

[@nelfimoya8747]

Uso chrome y me funciona todo solo que el video no se coloca en pantalla completa solo si le hago zoom ala pagina y le pongo 125% ahi si se ve en pantalla completa a que se debe esto?

[@CreadoresenFacebook]

A los nuevos del 2018.... Básicamente las nuevas políticas sobre el Autoplay se pueden resumir en lo siguiente: El autoplay en vídeos silenciados siempre se permiten El autoplay en vídeos con sonido se permite si: El usuario ha interaccionado con el dominio (ha hecho clic, por ejemplo). En escritorio, el mínimo del índice de interacción con contenido multimedia ha sido alcanzado, lo que significa que el usuario ha reproducido vídeo con sonido anteriormente. En móvil, el usuario ha añadido su sitio a su pantalla de inicio. Personalmente les recomiendo usar tubular.js y les va a quedar asi: www.misionrenuevo.com/

[@milito-no.k3149]

enlaces caídos

[@IbarsDaniel]

Pregunta: He intentado implementar esto, pero no funciona en iOS, iPhone & iPad no reproduce el video!! Crítica constructiva: Cuida la pronunciación de las palabras, especialmente en ingles. El video se trata sobre como implementar un video de fondo, creo que pasas demasiado tiempo ajustando los estilos del header-content y menos tiempo explicando como funciona la etiqueta video.

[@erickventura4380]

Como es que haces vídeos tan seguidos? ._.

[@FaztTech]

tengo un hermano gemelo xD

[@otpkatarina3493]

jajja buena XD

[@erickventura4380]

xD

[@luisalfredo6786]

no me sirvio pero bueno buen video saludo.

[@ReDeSkA]

Sigo trabado checando mi código xke hice lo mismo y no me quedo

[@avila176]

[@jenniretricardo8812]

Gracias querido, pero explicas demasiado rápido para los que somos principiantes.

[@luisfelipecardona8808]

jajajajaja enserio ? disminuyele la veloidad al video

[@IgorDisenoGrafico]

La verdad no se desarrolla la explicacion de los elementos usados, lo que son, como funcionan y sus usos, solo los pasos para la construccion de la pag, estas narrando lo que haces y eso no nos ayuda a entender a quienes arrancamos en este mundo. Estoy empezando y esperaba que el video me ayudara pero asi solo lograre reproducir el resultado sin entender lo que hice, ni como lo hice...

[@barckley2326]

VI---deo .... cuando dices video pareces español men.

[@ReDeSkA]

La neta se agradece el video pero no mames wey respira estas dando un tutorial no todos escriben ni saben que escribirás-_-