Learn how to place a background video on a website [Easy] 👨🏻💻
Vložit
- čas přidán 6. 09. 2024
- You will learn how to put a background video on a website using position: absolute and placing a layer on top.
/ @emprinnos
🗨️ Twitter: / emprinnos
📱 Instagram: / emprinnos
🟦 RESOURCES
✔️ If you need helping with placing videos in HTML, refer to this video:
• Aprende cómo poner e ...
✔️ To review how to use the position property refer to this video:
• ¿Cómo se usa position ...
#DesarrolloWEB #CSS #programación
![Scroll Suave con CSS [scroll-behavior:smooth] o jQuery](http://i.ytimg.com/vi/Ec26iCMC-6E/mqdefault.jpg)
![Scroll Suave con CSS [scroll-behavior:smooth] o jQuery](/img/tr.png)
![🧡 Cómo poner un VÍDEO de YouTube en HTML que se reproduzca solo [Curso de HTML desde cero]](/img/n.gif)
El único que tiene un video para solucionar este tema, en menos de cinco minutos. Tendrían que aprender sobre valor del tiempo y la fatiga auditiva y visual, toda esa fila de sabelotodos, que llenan la red de videos, con largas introducciones con música molesta, que causa sobresalto y ni hablar de la música de fundo que deja no escuchar o a penas, la voz del que habla y el contenido un enredo, que ni ellos se entienden.
Videos como este, son parte de la solución, no del problema. Como decimos por acá, eres un Tigre. Todo claro y aplicando. Gracias por compartir. SuperMegaLike.
Gracias folderuno por tu comentario, mayormente hacen videos para ganar vistas, suscriptores, etc. Yo hago videos educacionales para los amigos que quieren aprender, saludos!
Nuevo suscriptor mi hermano, esto es lo que estaba buscando.
Y con todo el respeto del mundo, tu español es mejor el mío, saludos desde Perú 🔴⚪🔴
gracias amigo por tu apoyo, comparte con otros amigos, saludos!
Muchísimas gracias me has salvado!! Muy bien explicado y fácil de entender!!
Vuelvo y te lo repito eres un crack!!!
gracias amigo, saludos!
Muchas gracias por el vídeo, en serio me ayudó mucho. Muchas gracias.
que bueno que te haya ayudado el video, comparte con otros amigos, saludos!
Dios Te bendiga hermano , Gracais por ser Consiso y preciso
Me sirvió muchísimo tu explicación. Muy buen video!
Gracias Maria, saludos!
Eres el mejor, de frente al grano!!!
Gracias Jerry, saludos!
Me ayudó muchísimo, la explicación clara y precisa, gracias, saludos desde la CDMX.
Que bueno Jose, saludos!
como dice el titulo: "easy" nuevo sub y que gran contenido!
gracias amigo, saludos!
Presciso y conciso,muy bueno mi amigo brazuca :)
que bueno que te haya ayudado el videl Benjamin, saludos!
Extraordinario. Gracias
oshhh no conocía la propiedad mix-blend-mode que gran video 😁
Wow, mil gracias, lo haces ver tan fácil :)
Un crack, como siempre. Claro y breve.
Muy agradecido por tus enseñanzas 👍
Gracias Fernando, saludos!
muy buen video y bien explicado!! te has ganado un nuevo suscriptor
gracias amigo!
Excelente vídeo bien explicado 👍
Buenisimo el video, excelentemente bien explicado, new susb.!!!
gracias Franky, saludos!
gracias ..like y suscripto!
Muchas gracias hermano, me funciono de maravilla
Que bueno Osmar, saludos!
fuiste mi salvavidas...
que bueno que te haya ayudado el video, comparte con otras personas que le necesiten, saludos!
👌 excelente, gracias por el video.
buenisimo, sin complicaciones. gracias
Muchas gracias por el video, me fue de gran ayuda
que bueno amigo, saludos!
Muchas gracias profe!!
claro Sofia, saludos!
Hola! Sabes que en mi web, coloco el video de fondo, anda perfecto todo, lo subo al repo enlazado a vercel y el video se ve bien el dispositivos android y en el sitio web de escritorio, pero en iPhone's no carga, se queda como imagen. Sabras por que y como resolverlo? Por ahora tuve que colocar para pantallas chicas un gif y no video, pero los gif se ven mal, baja resolucion
tengo el mismo problema. Lo pudiste resolver?
Excelente amigo! like y sub por tu buen trabajo!
Gracias me salvaste el dia
que bueno que te haya ayudado el video, saludos!
Me sirvio todo a la perfeccion!!! Pero me gustaria saber que stilos e pusiste a tus botones es que me gustaron bastante
aqui esta lo que he usado por los botones del video:
button {
display: inline-block;
border:none;
height:50px;
border-radius: 30px;
padding: 10px 0;
width: 200px;
background-color:#f5be09;
font-size: 1.8rem;
color: #3f3f3f;
font-weight: 800;
transition: 150ms;
margin-top: 40px;
}
button:focus {
outline:none;
}
button:hover{
transform:translate(0, -5px) ;
}
ponle una clase si es que tienes varios botones en tu proyecto
excelente👍
Soy tu fan 😳✌️
Gracias!
Excelente video.
Gracias amiguito! :)
que bueno que te haya ayudado el video, saludos!
Gracias bro
Eres el mejor
gracias amigo, saludos!
Crack..!
Justo lo que necesitaba, gracias \(._.)/
que bueno que te haya ayudado el video, saludos!
gracias , un capo
GRACIAS CAMPEON
Gracias !
amigo
gracias amigo
Que bueno que te haya ayudado, saludos!
¿Alguien sabe por qué no se reproduce en iPhone / Safari? Gracias
alguien sabe porque cuando uso videos hay veces que este no se reproduce automaticamente en la pagina.
Saludos colega gracias por el vìdeo, soy nuevo en esto y tengo una duda, tengo el index con extensiòn JS (index.js) en este caso còmo harìa para agregar el vìdeo de fondo por medio de Javascript?
no se por que harias algo asi, pero podrias acceder el elemento con Document.querySelector() y despues usar style.backgroundImage="url(imagenes/img.jpg)" Fijate en estos ejemplos: stackoverflow.com/questions/21496905/how-to-change-the-background-image-of-div-using-javascript
Genial
Muy bueno
el mejor video
👍
Genioo
Gracias Samuel, saludos!
Hola, me pasa que el video solo se reproduce en la vista previa en Dreamweaver pero al abrir el HMTL directamente en el navegador (probé varios) y no se reproduce, aun con el autoplay y el loop puesto, ayuda plz (PSD: gran video, bastante útil).
Hola Andres, sin ver el codigo es medio complicado indicarte por donde esta el error, puede ser que tenga que ver con la fuente del video, usa un pequeno video y colocalo en la carpeta misma del proyecto, puedes encontrar un video de prueba en pexels, a ver si te funciona, si no te funciona asi es porque hay un error en el codigo y no es el video el problema, fijate en la descripcion del video, alli he dejado el link del proyecto en github como guia
hola que tal , dejeme felicitarlo por el video y permitame hacerle una consulta , por que una vez creada la web, los botones no me funcionan ? por mas que le pongo un link de cuaqluier pagina en el "href" no me envian a la pagina que quiero , como si no funcionaran, pero si aparecen ahi, e igual con la barra de navegacion, muchas gracias de antemano.
lo mas probable es que la ruta este equivocada, fijate en este video que hice acerca de los enlaces: czcams.com/video/Mam7RgnY5Cg/video.html
para ponerle sonido??
buenas una genialidad , pero una pregunta donde puedo conseguir ese video? o bueno el material para usar ese video?
aca esta el link del proyecto en github, el video esta en la carpeta video
github.com/Emprinnos/videoFondo.git
Puedes buscar videso en pexel tambien
No me funciono porque no tengo todo el Codigo CSS.
aqui esta el proyecto en github:
github.com/Emprinnos/videoFondo.git
sigo exactamente los pasos y el video no sale, trabajo con HTML5 tiene algo que ver?y el video lo descarge de youtube tambien tiene algo que ver? ayudaaa por favor
no tiene naga que ver el html5, debe ser un error de sintaxis
y como puedo hacer lo mismo pero que el src del video, sea un video de youtube/vimeo por ejemplo? porque el unico problema que le veo aqui es que de esta forma hace la web lenta
cada video de youtube tiene una opcion "share" haz click ahi y copia el link del video.
o usa handbrake para comprimir tu video
perfeito
Messirve
que bueno amigo, saludos!
disculpa pero no me he enterado bien,no tengo ninguna experiencia en creacion ,yo tengo wordpress y como coloco el video desde ahi,? donde debo entrar para realizar todo esto? gracias
No he usado wordpress en bastante tiempo, pero estas plataformas suelen tener un panel de administrador, tendrias que tener acceso a los archivos html y css para modificarlos, pero si no tienes ninguna experiencia es medio complicado, si hago un tutorial rapido te aviso
Hola que tal, como estas ? Muchas gracias por tu contenido ! Una consulta, quiero poner un video de fondo pero no en toda la pagina, sino solo en una seccion, y lo que me pasa es que me es imposible centrarlo bien para todas las resoluciones, si achico la pantalla y demas, se me corre, alguna solucion? Porque siempre veo que todos los tutoriales que hay de fondos con video es para toda la pagina, no para una seccion particular
todo depende del contenedor donde se coloque el video, haz el contenedor responsive primero y una vez que funcione como quieras, le pones el video de fondo, lo mas comun es ponerlo para una pagina landing, tambien podrias poner el video en el marcado mismo(archivo html) en vez de usarlo como fondo
@@Emprinnos Pude solucionarlo ! Muchas gracias ! Tenes idea cuanto es el peso ideal para tener un video de background? para no comer muchos datos a los movil ni sea pesada la pagina
@@alexisgraff2049 para videos de fondo que mayormente se cubren, se suele usar 720, ahora el tamano depende de que tan largo sea el video,
Hola cuánto cobras por colocar el video
Y solo asi pude reprducir mis videos.. gracias
Hola porque usas ese main_?
Main es un tag semantico para contenido principal que no se repite en otras paginas, podria ser simplemente un div, pero un div no tiene valor semantico, es cuestion de preferencia
@@Emprinnos gracias por tiempo amigo, nuevo sub
@@cdicho 👍
Ey Bro y si quiero agregar imágenes abajo de las letras como le hago?
el video es el fondo nada mas, podrias colocar otro contenedor y poner las imagenes alli
Te hago una consulta, en firefox anda super, pero en crome el video no ocupa toda la pantalla y no se reproduce, sabes que puede ser?
Deberia de andar si anda en firefox, fijate en los settings de chrome si “use hardware acceleration” esta on, ponle off y chequea de nuevo, tambien podrias limpiarle el cache y actualizarlo
@@Emprinnos Sabes que tenia el tamaño de la pantalla de crome al 90%.....perdi toda la mañana y la tarde y no se porque se me ocurrio fijarme ahi, lo raro es que cuando achico el porcentaje de la pantalla se achican algunas cosas, pero no todas...... Igual voy a hacer lo que me estas consejando. Mil mil gracias por responder
@@silvinamarcantoni2441 intenta eso primero con chrome no debe haber problemas como con safari u otros navegadores mas antiguos
@@Emprinnos Mil gracias......no sabia que el ajuste del monitor es por navegador y por pestaña!!
@@silvinamarcantoni2441 👍
Muchas gracias por el vídeo pero no se logra apreciar el código completo del archivo de estilos. Podrías compartirlo por favor?
aqui esta el proyecto en github:
github.com/Emprinnos/videoFondo.git
@@Emprinnos Muchas gracias!
Holaa, porque top 0 y left 0?
Para que este pegado al contenedor principal, cuando posicionas algo de forma absoluta tienes que indicar la posicion relativa al contenedor principal
@@Emprinnos Muchas graciass!
@@eywasap5425 👍
Hola, quisiera saber si tu o alguien sabe donde alejar este tipo de formatos "Mp4" en algun servidor de forma gratis, ya que los que poseemos paginas de bajos recursos de servidor, probablemente se caiga a mitad de mes, debido a que la transferencia de GB aumenta cada vez que algun visitante cargue el video y/o actualice. Esto provoca que la pagina si tiene visitas concurridas en un tiempo corto se caiga hasta el resto que queda de mes. Saludos
La verdad que no se, los servicios gratis mayormente tienen un limite de recursos
hola me puedes compartir el css ocmpleto por favor, no se me repoproduce el video :(
fijate en la cuenta de github github.com/Emprinnos debe estar alli
hola me puedes ayudar con algo? contestame si estas disponible