Video de Fondo con HTML5 y CSS3

  Рет қаралды 74,737

Fazt

Fazt

Күн бұрын

Пікірлер: 127
@danielpineda3824
@danielpineda3824 3 жыл бұрын
6:40 La etiqueta video debe tener los siguientes atributos para q se reproduzca automaticamente:
@fran7318
@fran7318 2 жыл бұрын
muchas gracias!
@togakurerotten4801
@togakurerotten4801 2 жыл бұрын
Fazt cada vez que veo un video de tu canal aprendo algo nuevo, muchas gracias por compartir, este proyecto estuvo genial!!
@Mr_Euge
@Mr_Euge 7 жыл бұрын
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!
@maxg.6512
@maxg.6512 2 жыл бұрын
SOS UN GENIO, ME ENCANTA LA FLUIDEZ QUE ESCRIBE...
@NivelnegroBlogspotNivelNegro
@NivelnegroBlogspotNivelNegro 3 жыл бұрын
Como le dijeron a Berns: "Realmente eres el rey de reyes", impresionante como siempre Fazt
@appencuestas4014
@appencuestas4014 6 жыл бұрын
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
@pedroparradovargas4826 6 жыл бұрын
gracias
@R3Alonso
@R3Alonso 6 жыл бұрын
muchas gracias !
@deinerduque2119
@deinerduque2119 5 жыл бұрын
Eres Dioos!!
@juanrodrigoramos1581
@juanrodrigoramos1581 5 жыл бұрын
gracias.
@vicomaya7448
@vicomaya7448 5 жыл бұрын
MUCHAS GRACIAS. A veces funcionaba, otras no, con muted siempre funciona.
@mikesalinas5222
@mikesalinas5222 11 ай бұрын
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.
@areleoloyv
@areleoloyv 4 жыл бұрын
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)
@AlanDev95
@AlanDev95 3 жыл бұрын
Excelente video, 2021 y sigues salvando proyectos! jajaja ¡saludos!
@silvanagualoto2117
@silvanagualoto2117 3 жыл бұрын
El mejor justamente lo que buscaba todo una semana gracias.
@taniaverthi.
@taniaverthi. 5 жыл бұрын
Para los que tenemos un poco de conocimiento es útil . Gracias!
@ignacioja
@ignacioja 5 жыл бұрын
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
@eche2003
@eche2003 7 жыл бұрын
Justo tengo que hacer eso para una página amiga , siempre un genio explicando :-) , sigue asi
@iPhoeniix26
@iPhoeniix26 7 жыл бұрын
Me encantan tus videos fazt!!!
@FaztTech
@FaztTech 7 жыл бұрын
Gracias Paul.
@martinflores9611
@martinflores9611 7 жыл бұрын
felicidades siempre veo tus vídeos están muy bien echos saludos fazt
@jenniretricardo8812
@jenniretricardo8812 5 жыл бұрын
Así quedo mi ejercicio 👉 jenricardo.github.io/html_video_bg/ Los archivos 👉 github.com/jenricardo
@hantra0294
@hantra0294 4 жыл бұрын
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
@lacasagamer931
@lacasagamer931 4 жыл бұрын
super facil, bien explicado, gracias
@enmanuelrondon5545
@enmanuelrondon5545 10 ай бұрын
gran video! no tienes un tutorial como hacerlo en react??
@TheAbinanye
@TheAbinanye 7 жыл бұрын
Estaría mejor si el video está en KZbin o en otra plataforma. Like brother
@FaztTech
@FaztTech 7 жыл бұрын
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
@michelstefannyperezuribe3638 5 жыл бұрын
No se cuantas veces dijiste la palabra video XD , buen video
@davidmmarshall926
@davidmmarshall926 6 жыл бұрын
gracias ! te felicito !!!
@angelbello2753
@angelbello2753 7 жыл бұрын
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
@FaztTech 7 жыл бұрын
Hola Angel, si por supuesto, de hecho vas a ver esto muy seguido en los frameworks de CSS3.
@angelbello2753
@angelbello2753 7 жыл бұрын
Excelente ..gracias y Bendiciones
@marianobarrionuevo2278
@marianobarrionuevo2278 5 жыл бұрын
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?
@mardinamica
@mardinamica 6 жыл бұрын
Hola , gracias por tu video. Una consulta, ¿ Será posible poner imágenes de un video en vivo? desde una webcam por ejemplo? Gracias
@Melon123321xd
@Melon123321xd 4 жыл бұрын
excelente ! Gracias
@pandoradesign_plus
@pandoradesign_plus 2 жыл бұрын
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.
@edwinrafaelhenriquezh2085
@edwinrafaelhenriquezh2085 4 жыл бұрын
Amigo, una pregunta. Eso es posible con Next.js
@otpkatarina3493
@otpkatarina3493 7 жыл бұрын
Eres un master! :D
@FaztTech
@FaztTech 7 жыл бұрын
Gracias Radel :D
@odaliscueto4263
@odaliscueto4263 6 жыл бұрын
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
@FaztTech 6 жыл бұрын
Gracias por el feedback lo tendré muy en cuenta para futuros vídeos :)
@avila176
@avila176 6 жыл бұрын
@@FaztTech disque socio jaja
@ironpolux
@ironpolux 6 жыл бұрын
@@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
@thesirfm 5 жыл бұрын
Que tal si pones el video en velocidad 0.5 :v
@eritopape3195
@eritopape3195 4 жыл бұрын
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
@WilliamOContrerasT
@WilliamOContrerasT 5 жыл бұрын
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
@mauriciovillalba1065 4 жыл бұрын
Tengo el mismo problema
@yuf8515
@yuf8515 5 жыл бұрын
Ya entendí porque Fazt.
@moisesosegueda2048
@moisesosegueda2048 4 жыл бұрын
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
@gonzalomtz 5 жыл бұрын
es posible poner un video de fondo desde una url? osea que no lo tenga descargado
@eslogodesign
@eslogodesign 3 жыл бұрын
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
@eslogodesign 3 жыл бұрын
Aunque no he visto cómo, he leído que con jquery se pude... ¿Sabes algo de ello? gracias!
@jemccstarr3751
@jemccstarr3751 3 жыл бұрын
Quiero decsrgar un video de fondo como lo hago
@bryanvilchez1282
@bryanvilchez1282 5 жыл бұрын
Uso el mozilla firefox y el video no reproduce si alguien sabe el por que me gustaria que me ayudaran pls
@sax5590
@sax5590 5 жыл бұрын
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
@marcmedrano7351 3 жыл бұрын
text-align: center; line-height: (la altura de tu div);
@javiromero4067
@javiromero4067 3 жыл бұрын
y si quiero que el video este con sonido como le hago
@lh536
@lh536 6 жыл бұрын
que buen video! Felicitaciones... tengo una pregunta... no me funciona el video en dispositivos móviles; sabes la razón? Gracias.
@MrEzeedge
@MrEzeedge 6 жыл бұрын
todavia no logro como hacer para que el video sea compatible con todos los navegores.
@DIYOmarAcevedo
@DIYOmarAcevedo 2 жыл бұрын
copie y pegue tu codigo y no funciona, no reproduce el video
@teti5555
@teti5555 6 жыл бұрын
gracias
@darkarlax
@darkarlax 6 жыл бұрын
Alguna recomendacion para convertir el video de fondo, Full Responsive?
@CreadoresenFacebook
@CreadoresenFacebook 6 жыл бұрын
con tubular.js
@williamm.p.136
@williamm.p.136 7 жыл бұрын
cuando tutorial con css grid? agregar imagenes? agregar videos? posicionar elementos
@FaztTech
@FaztTech 7 жыл бұрын
sí es un tema bastante actual, así que espero darme tiempo y publicar varios ejemplo de CSS grid :D. ¡Saludos!
@jser.rodriguez
@jser.rodriguez 2 жыл бұрын
Fazt eres colombiano?
@FaztTech
@FaztTech 2 жыл бұрын
No amigo, pero si tengo varios amigos colombiano :)
@tobiaspossetto10
@tobiaspossetto10 4 жыл бұрын
Hola, no se repite el video aunque use loop
@Tramadigital
@Tramadigital 6 жыл бұрын
Hola buen dia porque no corre el video en google en firefox anda perfecto pero en google no reproduce el video ..
@tobiaspossetto10
@tobiaspossetto10 4 жыл бұрын
Como hago para que cuando la pantalla disminuya el video se adapte?
@milito-no.k3149
@milito-no.k3149 5 жыл бұрын
el video no se puede descargar,.enlace caído
@thesirfm
@thesirfm 5 жыл бұрын
Pensé que era un video de 20 minutos con un video de html y css de fondo xdd
@Warrypro
@Warrypro 7 жыл бұрын
Buen video, aunque se puede optimizar y reducir mucho el código usando pseudo elementos.
@wassaman4928
@wassaman4928 6 жыл бұрын
¿podrias publicar esos pseudo elementos para los que no saben?
@speedgonzalez72
@speedgonzalez72 6 жыл бұрын
hola, lo abri con google ghrome y no reproduce el video ,en los demas navegadores si , porque?
@CreadoresenFacebook
@CreadoresenFacebook 6 жыл бұрын
¡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
@CristalMercadoR 6 жыл бұрын
En mi caso no se quiere reproducir el vídeo aun colocándole autoplay y loop, como puedo solucionarlo?
@CreadoresenFacebook
@CreadoresenFacebook 6 жыл бұрын
con javascript,personalmente yo lo hago usando librerías js,tubular.js por ejm y me queda asi www.misionrenuevo.com/
@ginnozavala4201
@ginnozavala4201 4 жыл бұрын
codigo para que funcione en el chrome , de nada :)
@tobidelloni
@tobidelloni 4 жыл бұрын
te amo
@francofrigerio2666
@francofrigerio2666 4 жыл бұрын
Y en Brave tambien!.. muchas gracias!
@motivationdiaria
@motivationdiaria 3 жыл бұрын
puse el autoplay y el loop y no me funciona el video no se quiere reproducir alguien que me ayude
@jpierodot
@jpierodot 7 жыл бұрын
Gracias por el vídeo! ¿tienes vida social? jajaja xD!
@Carlos-iq4th
@Carlos-iq4th 4 жыл бұрын
7:00 momento Latam
@carlosmartinez6281
@carlosmartinez6281 5 жыл бұрын
No me funcionaba el video hasta que le agregue muted al inicio de autoplay loop y se arreglo
@rafaelvaldiviezoancajima4736
@rafaelvaldiviezoancajima4736 5 жыл бұрын
gracias bro me funciono
@ricardorios3412
@ricardorios3412 4 жыл бұрын
mil gracias crack
@carlosmartinez6281
@carlosmartinez6281 5 жыл бұрын
como hago para escuchar el sonido del video de fondo, alguien sabe?
@eduardosanchez5579
@eduardosanchez5579 5 жыл бұрын
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
@MiguelGomez-hh6fd
@MiguelGomez-hh6fd 7 жыл бұрын
Ubuntu Mate ???
@FaztTech
@FaztTech 7 жыл бұрын
Así es :D
@fula5
@fula5 10 ай бұрын
El video ya no se encuentra disponible, pero está aquí : kzbin.info/www/bejne/pnSbfHqun62bodEsi=N7YqgCP3yJqnvrBg
@ulisesalbores2794
@ulisesalbores2794 4 жыл бұрын
El texto y el boton se mueven a la derecha, alguna solución? Buen video por cierto ^^
@milito-no.k3149
@milito-no.k3149 5 жыл бұрын
enlaces caídos
@CreadoresenFacebook
@CreadoresenFacebook 6 жыл бұрын
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/
@erickventura4380
@erickventura4380 7 жыл бұрын
Como es que haces vídeos tan seguidos? ._.
@FaztTech
@FaztTech 7 жыл бұрын
tengo un hermano gemelo xD
@otpkatarina3493
@otpkatarina3493 7 жыл бұрын
jajja buena XD
@erickventura4380
@erickventura4380 7 жыл бұрын
xD
@nelfimoya8747
@nelfimoya8747 5 жыл бұрын
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?
@avila176
@avila176 6 жыл бұрын
@luisalfredo6786
@luisalfredo6786 6 жыл бұрын
no me sirvio pero bueno buen video saludo.
@ReDeSkA
@ReDeSkA 5 жыл бұрын
Sigo trabado checando mi código xke hice lo mismo y no me quedo
@jenniretricardo8812
@jenniretricardo8812 5 жыл бұрын
Gracias querido, pero explicas demasiado rápido para los que somos principiantes.
@luisfelipecardona8808
@luisfelipecardona8808 4 жыл бұрын
jajajajaja enserio ? disminuyele la veloidad al video
@IbarsDaniel
@IbarsDaniel 5 жыл бұрын
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.
@Igor_Teran
@Igor_Teran 6 жыл бұрын
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
@barckley2326 3 жыл бұрын
VI---deo .... cuando dices video pareces español men.
@ReDeSkA
@ReDeSkA 5 жыл бұрын
La neta se agradece el video pero no mames wey respira estas dando un tutorial no todos escriben ni saben que escribirás-_-
Esta NOVEDAD de CSS ¡SI QUE LO CAMBIA TODO! 🤯
8:26
midulive
Рет қаралды 114 М.
She wanted to set me up #shorts by Tsuriki Show
0:56
Tsuriki Show
Рет қаралды 8 МЛН
How to have fun with a child 🤣 Food wrap frame! #shorts
0:21
BadaBOOM!
Рет қаралды 17 МЛН
$1 vs $500,000 Plane Ticket!
12:20
MrBeast
Рет қаралды 122 МЛН
What Will Really Make You A Programmer
11:46
Fazt
Рет қаралды 30 М.
Эти функции chatGPT навсегда изменят твою жизнь!
18:09
BEST Website Builder 2025 (My TOP Recommendation)
15:27
Metics Media
Рет қаралды 1,6 МЛН
Aprende CSS Flexbox en 10 minutos 📚
13:38
The Coder Cave esp
Рет қаралды 33 М.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 534 М.