Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Aporte pagina con vídeo de fondo
#1
Ladrillo 
hola compañero le vengo a compartir como crear una pagina de home con vídeo de fondo 

esto es lo que vamos a necesitar 

necesitamos un video en formato mp4 para reproducir en nuestro navegador de fondo, una canción mp3 de fondo y el logo de la web

index.html
Código:
<html lang="en">
<head>
   <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
  <link rel="stylesheet" href="styles.css">
   <title>title</title>
</head>
<body>
    <div class="blur">  </div>
   <video src="video/Kavinsky%20-%20Protovision.mp4" autoplay muted loop  poster=""></video>
   <audio src="vision.mp3" autoplay="true" volume="50"></audio>
   <div class="logo">
       <img src="retro.png" alt="">
       <a href="#">&rarr;     START TO ENTER     &larr;</a>
   </div>
   <div id="title">
       
   </div>
 
</body>
</html>

estilos css

Código:
body{
   margin: 0;padding: 0;
}

video{
   position: fixed;
   min-width: 100%;
   min-height: 100%;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   z-index: -1;
}

.blur{
   width: 100%;
   min-height: 1000px;
   background: rgba(0,0,0,0.6);
   z-index: 2;
}

.logo{
   margin: -800px auto;
   width: 500px;
   height: 130px;
   z-index: 3;
   background: ;
   overflow: hidden;
   
}

.logo img{
   margin: auto;
   width: 500px;
   height: 100px;
   
}

.logo a{
   
   font-size: 16px;
   font-family:'Conv_retro',Sans-Serif;
   margin: 0 170px;
   color: red;
   text-decoration: none;
   
}

.logo a:hover{
   text-decoration: underline;
}
yo la quise hacer algo retro por el estilo.


Archivos adjuntos Miniatura(s)
   
#2
Simple, me lo llevo respetando creditos.
#3
muy bueno gracia por compartilo, pero eso no rentalisa la carga de la pagina, porque actualmente lo que buscamos es que carge mas rapido la pagina y poner un video de fondo como que no cu ple con eso que buscamos
[Imagen: Nexo_Firma.gif]
WWW
#4
(04-02-2018, 11:31 PM)ReyNexo23 escribió: muy bueno gracia por compartilo, pero eso no rentalisa la carga de la pagina, porque actualmente lo que buscamos es que carge mas rapido la pagina y poner un video de fondo como que no cu ple con eso que buscamos

bueno, de que un video consume mas recursos que una web con html/css basico, esta claro. lo otro es que hay sitios básicos "landing pages" o sitios personales pequeños, donde a cambio de un montón de estilos y edición en html, es mas vistoso y mas práctico un simple video, si a esto le sumamos que hay sitios donde un video habla mas de un producto que un simple texto en h1,h2, (una web de un grupo musical, un grupo de diseño 3d, un artista, etc).

ahora, si tu sitio es un foro, un blog, o un sitio con contenido dinamico, pues ya el tema si hay que analizarlo con mas detenimiento, ya que en estos casos un video en portada con 100vh puede dar más problemas que beneficios Sonrisa  

salu2
#5
Esta bien, el problema es que la banda ancha se consumirá mucho mas rápido :C y también que dependiendo del tamaño del vídeo y la calidad de este, puede que llegue a afectar la optimización del sitio.
[Imagen: 10wqwb4.png]
WWW
#6
(06-02-2018, 04:07 PM)Iro escribió: Esta bien, el problema es que la banda ancha se consumirá mucho mas rápido :C y también que dependiendo del tamaño del vídeo y la calidad de este, puede que llegue a afectar la optimización del sitio.


En esos casos es recomendable que sea visualizado externamente así evitar dicho consumo.
WWW
#7
El video puede afecar la velocidad del sitio, porque si no consume mucho
#8
Saludos,

Como comentan ciertas personas dentro del tema, eso va ralentizar la experiencia de usuario en cierto sentido, por motivos de cargar la página. Pero como dijo @Vicen eso es siempre y cuando estén subidos o cargados en tu hosting.. Yo te recomendaria usar youtube (si no te interesa que las personas descarguen y compartan tu video) o jwplayer si deseas privatizarlos, es decir, hacer todo lo contrario que te comento con youtube..
#9
(06-02-2018, 06:48 PM)Vicen escribió:
(06-02-2018, 04:07 PM)Iro escribió: Esta bien, el problema es que la banda ancha se consumirá mucho mas rápido :C y también que dependiendo del tamaño del vídeo y la calidad de este, puede que llegue a afectar la optimización del sitio.


En esos casos es recomendable que sea visualizado externamente así evitar dicho consumo.

Como se coloca la visualizacion externa?, es decir que parte del codigo hay que modificar para que no cossuma tanto recuersos?
[Imagen: Nexo_Firma.gif]
WWW
#10
(08-02-2018, 01:07 PM)ReyNexo23 escribió:
(06-02-2018, 06:48 PM)Vicen escribió:
(06-02-2018, 04:07 PM)Iro escribió: Esta bien, el problema es que la banda ancha se consumirá mucho mas rápido :C y también que dependiendo del tamaño del vídeo y la calidad de este, puede que llegue a afectar la optimización del sitio.


En esos casos es recomendable que sea visualizado externamente así evitar dicho consumo.

Como se coloca la visualizacion externa?, es decir que parte del codigo hay que modificar para que no cossuma tanto recuersos?

Se sube a otro sitio web, pero el problema es que no muchos sitios te dan la url directa al mp4. (o al menos yo no conozco sitios así)
Por lo general ellos te dan su propio embed y entonces si cambiaría el código.
[Imagen: 10wqwb4.png]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Pagina carga como no segura diana30dom 3 272 08-01-2018, 09:15 AM
Último mensaje: Vicen
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 1,189 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
Pregunta Solucionado: Ayuda con página TamiGantcheff 4 367 02-08-2017, 04:17 PM
Último mensaje: Vicen
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 644 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
  [Duda] COPIA DE SEGURIDAD PÁGINA WEB pedrovillarraga 8 640 02-08-2015, 04:12 PM
Último mensaje: YamaT
  Proteger pagina con login sin Base de datos zodiaco 12 2,647 04-07-2015, 11:38 AM
Último mensaje: davilro
  Personalizar el cursor de la pagina aerotuning 6 778 30-04-2015, 10:07 PM
Último mensaje: Minikole
  [PHP] Capturamos la URL de una página torgar22 0 382 04-03-2015, 03:33 PM
Último mensaje: torgar22
  [Tutorial] Como hacer que tu página no se almacene en la caché del navegador Kevin9908 10 1,950 28-02-2015, 08:26 PM
Último mensaje: amplox
  cómo se puede hacer que un pié de página cahcnehco29 9 1,188 27-12-2014, 12:40 PM
Último mensaje: Vicen



Usuarios navegando en este tema: 1 invitado(s)