Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

No me sale el video bien

Hola, sucede que el video me sale en un lugar que no corresponse:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadMi código HTML para institucional es:

<section class="institucional container">
                     <div class="institucional contenido">
                            <div class="institucional informaciones">
                              <h2 class="institucional__titulo">Institucional</h2>
                              <p class="institucional__descripcion">Un poco más sobre Apeperia</p>
                               <address class="institucional__direccion">
                                  Calle Vergueiro, 3185 </br>
                                  Villa Mariana, São Paulo
                                 <article class="institucional_contacto">
                                      <p>
                                        <a href="+551155712751" class="institucional_contacto-telefono">+55 11 55712751</a> o
                                        <a href="mailto:contato@apeperia.com" class="institucional_contacto-email">contato@apeperia.com</a>
                                
                                     </p>
                                 </article>
                             </address>
                          </div>
                             <video src="img/formacion-java.mp4" class="institucional__video" controls></video>
                      </div>
                </section>

Y el CSS de Institucional es:

@media screen and (min-width:768px) {
    .institucional__contacto-email{
        display: inline-block;
    }

    .institucional__video{
        width: 100%;
    }
    
}


@media screen and (min-width:1024px) {
    .institucional__contenido{
        width: 100%;
        display: flex;
        justify-content: space-around;
        text-align: left;
    }

    .institucional__contacto-email{
        display: block;
    }

    .institucional__video{
        align-self: flex-end;
        width: 375px;
    }
    
}

Quedo atento a las correcciones, gracias y un saludo!

1 respuesta

Hola, Silvia! Cómo estás?

¿Cuál es la vista que se muestra en la imagen? ¿El de un tablet? Si es así, parece que se están aplicando los efectos, sin embargo, alguna propiedad puede estar empujando el video un poco más hacia la derecha.

Esto puede suceder si hay algún margin o padding que interfiere directamente con el contenedor de video.

También podría ser que la propiedad align-self esté interfiriendo.

Puede intentar agregar la siguiente línea de código a la media query:

@media screen and (min-width:768px) {
    .institucional__contacto-email{
        display: inline-block;
    }

    .institucional__video{
        width: 100%;
        align-self: center; /* esto alinearía el video al centro, no a la derecha. */
    }
    
}

Espero haber ayudado!

Hasta la próxima!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!