Video de fondo Tutorial del proyecto JavaScript

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

background-video/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sahand Ghavidel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="preloader">
        <img src="preloader.gif" alt="preloader">
    </div>
   <Header>
       <video class="background-video" muted autoplay loop src="background-video.mp4"></video>
       <h1>Sahand Ghavidel</h1>
       <button class="btn btn-secondary">
        <i class="fa fa-pause" aria-hidden="true"></i>
       </button>
   </Header>
   <script src="index.js"></script>
</body>
</html>

Vídeo de fondo

Vídeo de fondo

Créalo a partir del código fuente

Practica con proyectos relacionados

Ventana emergente de tráiler de vídeo

Clasificación de emojis

Sección de pestañas

Ventana emergente de tráiler de vídeo

Clasificación de emojis

Sección de pestañas