¿Cómo hago para que mi video de fondo, que tiene un z-index: -1, se desplace junto con la página?

Soy bastante nuevo en la programación, por lo tanto solo utilizo y estoy familiarizado con HTML y CSS.

Mi objetivo
Para esta página en la que estoy trabajando, quiero tener un video como fondo y que el video se desplace con el contenido de la página.

Mi situación
Según entiendo, no se puede utilizar la propiedad background para un video. Por lo tanto, he utilizado un código que coloca el video en z-index: -1;, de manera que actúa como fondo y se puede colocar contenido encima. Esto funciona bien. Tengo mucho contenido encima y todo funciona muy bien.

Mi problema
Lo único que no consigo que funcione es hacer que el video se desplace con el contenido de mi página. En lugar de eso, se queda fijo en su lugar mientras el contenido que está encima se desplaza.

He intentado lo siguiente sin éxito:
– background-attachment: scroll, aplicado a un contenedor que incluye el video.
– background-attachment: scroll, aplicado al video en sí.
– buscar sin cesar para encontrar la respuesta.

Mi pregunta
¿Cómo puedo tener el video como fondo y hacer que se desplace con la página?

Muchas gracias por cualquier información que tengas.

(Lo que creo que es) El HTML relevante:

< source src=”https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4″ type=”video/mp4″>

(Lo que creo que es) El CSS relevante:

#background-video {
width: 100vw;
height: 625px;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}

@media (max-width: 480px) {
#background-video { display: none; }
body {
background: url(“https://assets.codepen.io/6093409/river.jpg”) no-repeat;
background-size: cover;
}
}

davy.ai

July 30, 2023 at 6:31 pm

Solución para hacer que el video se desplace con el contenido de la página

Como mencionaste, usar la propiedad background-attachment: scroll no funciona para fondos de video, ya que solo se aplica a imágenes.

Sin embargo, puedes lograr el efecto deseado de hacer que el video se desplace con el contenido de tu página cambiando la propiedad position de fixed a absolute y ajustando su contenedor padre para que actúe como punto de referencia para la posición del video.

Así es como puedes modificar tu CSS:

#background-video {
  width: 100vw;
  height: 625px;
  object-fit: cover;
  position: absolute; /* cambiar de fixed */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.parent-container {
  position: relative; /* esto actuará como punto de referencia para la posición del video */
}

Y luego envuelve tu elemento de video dentro de un contenedor padre de la siguiente manera:

<div class="parent-container">
  <video id="background-video" autoplay="" loop="" muted="" poster="https://assets.codepen.io/7471668/truck-video.png">
    <source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
  </video>
</div>

Esto debería permitir que el video se desplace junto con el contenido de la página.

Espero que esto ayude a resolver tu problema. Avísame si tienes alguna otra pregunta.

Answer

davy.ai

July 30, 2023 at 6:31 pm
Solución para hacer que el video se desplace con el contenido de la página

Como mencionaste, usar la propiedad background-attachment: scroll no funciona para fondos de video, ya que solo se aplica a imágenes.

Sin embargo, puedes lograr el efecto deseado de hacer que el video se desplace con el contenido de tu página cambiando la propiedad position de fixed a absolute y ajustando su contenedor padre para que actúe como punto de referencia para la posición del video.

Así es como puedes modificar tu CSS:
```
#background-video {
  width: 100vw;
  height: 625px;
  object-fit: cover;
  position: absolute; /* cambiar de fixed */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.parent-container {
  position: relative; /* esto actuará como punto de referencia para la posición del video */
}
```
Y luego envuelve tu elemento de video dentro de un contenedor padre de la siguiente manera:
```
<div class="parent-container">
  <video id="background-video" autoplay="" loop="" muted="" poster="https://assets.codepen.io/7471668/truck-video.png">
    <source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
  </video>
</div>
```
Esto debería permitir que el video se desplace junto con el contenido de la página.

Espero que esto ayude a resolver tu problema. Avísame si tienes alguna otra pregunta.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo hago para que mi video de fondo, que tiene un z-index: -1, se desplace junto con la página?

Answer

davy.ai