Práctica Web 3D
En la práctica de hoy nuestro objetivo es conseguir incorporar un elemento 3D a una página web. Para ello, haré una especie de portfolio en el cual se muestra un vídeo de un proyecto a modo de "expositor".
1º Paso: Crear una carpeta
Para empezar debemos crear una carpeta en la que introduciremos el archivo HTML y el CSS. El HTML se llamará web3d.html y el CSS se llamará estilo original.css. Debemos recordar este nombre a la hora de introducir el estilo en el html, puesto que debemos introducir exactamente el mismo nombre.
2º Paso: Introducir la etiqueta video en el HTML
Para poner un vídeo en una web, hemos usado la etiqueta <video> para introducirlo, ajustándolo con diferentes modificadores como autoplay, para que se reproduzca solo, muted, para quitar el sonido y tener una mejor experiencia de usuario, y loop, para que cuando acabe se reproduzca continuamente.
En el caso de que esta página sea para uso propio, en src pondremos la dirección del vídeo en nuestro escritorio. Sin embargo, nosotros queremos que sea una web pública para lo que usaremos un servidor. Por ello, en src únicamente pondremos el nombre del vídeo en formato mp4.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página web con Video de fondo de pantalla</title>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="estilo original.css">
</head>
<body>
<video src="Video prototipo Lucia Iglesias_Laura Rodriguez_Mikel Landea.mp4" autoplay="true" muted="true" loop="true">
</video>
<main>
<h1>Video de fondo</h1>
</main>
</body>
</html>
En caso de querer la web para uso propio y privado, pondríamos en src la dirección en el escritorio: "C:\Users\luuci\OneDrive\Escritorio\Lucia\Diseño nene\Tercero\Primer cuatri\bagnato\Video\Video prototipo Lucia Iglesias_Laura Rodriguez_Mikel Landea.mp4"
3º Paso: Ajustar el tamaño y la adaptación del video con CSS
Podemos ajustar cómo se ve el vídeo en la web con el archivo de estilo:
/*htps://www.youtube.com/watch?v=tI3Gfn8affA*/
body{
margin:0;
display:flex;
justify-content:flex-end;
font-family:cursive;
}
video{
position:fixed;
min-width:100%;
min-height:100%;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
z-index:-1;
-webkit-filter:grayscale(90%);
}
main{
width:40%;
background:rgba(0,0,0,0.5);
color:#fff;
padding:20px;
margin:5%;
}
4º Paso: Subir los archivos a un servidor
Finalmente hemos subido nuestros archivos, incluido el vídeo a un servidor gratuito de WebHost.
Mediante este enlace puedes visitar la página web que hemos creado.
.png)
Comentarios
Publicar un comentario