0

he colocado un vídeo en mi slider, pero también quisiera que tuviera letras encima del vídeo sin embargo no se visualizan, realmente no sé que estoy haciendo mal, espero mepuedan auxiliar

Este es mi código .html:

<!-- Slide 1 -->
                    <div class="carousel-item active">
                        <video id="slider" autoplay loop muted>
                            <source src="assets/img/slider/angel.mp4" type="video/mp4">
                            <div class="carousel-container">
                                <div class="carousel-content">
                                    <h2 class="animate__animated animate__fadeInDown">Welcome to <span>Alstar</span></h2>
                                    <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus
                                        et tempore modi architecto.</p>
                                    <a href="#about" class="btn-get-started scrollto animate__animated animate__fadeInUp">Read More</a>
                                </div>
                            </div>
                        </video>
                    </div>

Y este es mi código css donde configuro las dimensiones del vídeo:

#slider {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    object-fit: cover;
}

Muchas gracias de antemano =(

1 respuesta 1

2

No puedes poner el texto dentro de la etiqueta de <video>. Necesitas z-index: 1; para colocarlo encima del <video>.

#slider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  object-fit: cover;
}

.carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="carousel-item active">
  <video id="slider" autoplay loop muted>
        <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" />
      </video>
  <div class="carousel-container">
    <div class="carousel-content">
      <h2 class="animate__animated animate__fadeInDown">
        Welcome to <span>Alstar</span>
      </h2>
      <p class="animate__animated animate__fadeInUp">
        Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.
      </p>
      <a href="#about" class="btn-get-started scrollto animate__animated animate__fadeInUp">Read More</a
          >
        </div>
      </div>
    </div>

1
  • Muchas gracias, me funciono perfectamente ^_^ el 21 ene. 2021 a las 20:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.