1

Dada la siguiente estructura:

<div class="col"> <!-- Columna con la lista de Spotify -->

    <?php

        $sql = "SELECT enlace_spotify FROM listas WHERE ano = $recopilatorio";
        $resultados = mysqli_query($conexion, $sql);

        while($fila = mysqli_fetch_assoc($resultados))
        {
            $enlace_spotify = $fila['enlace_spotify'];

            echo '<iframe src="'.$enlace_spotify.'" width="400" height="840" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>';
        } 

        mysqli_close($conexion);

    ?>

</div>

¿Cómo podría conseguir que el iframe aparezca centrado -sólo horizontalmente- dentro del div? He probado con justify-content-center y mx-auto (también como clases del propio iframe, por si acaso) pero no pasa nada.

Gracias de antemano.

1 respuesta 1

3

Puedes lograrlo de la forma simple y rápida así:

<p align="center">

  <iframe src="https://open.spotify.com/embed/album/2g4i8tiNEGn1dCNYeuvixB" width="400" height="840" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

  <p/>

Esto centrará el <iframe> de forma automática. Pero hay dos problemas, primero el atributo align es obsoleto en HTML5 y segundo, esto sería un hack de diseño, cosa que no me gusta.

En su lugar, usemos las clases que nos ofrece Bootstrap.

Para trabajar con elementos "embebidos" (embed), Bootstrap recomienda las siguientes clases .embed-responsive y .embed-responsive-16by9, esta última define el aspect ratio.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>

Por último para centrar tu contenedor, se usa la clase .mx-auto. Hasta aquí tu lista ocuparía el 100% del ancho de su contenedor, para cambiar esto podrías simplemente usar la clase .w-50 que lo reduce al 50% del tamaño, la consideración aquí es que ese 50% es relativo al tamaño de la pantalla, por lo cual en resoluciones menores se puede ver afectado.

¿Qué solución queda? Pues en tu código ya tienes definido un ancho en 400px, ese ancho debes aplicarlo al contenedor y no al iframe. También es recomendable quitar los atributos frameborder y allowtransparency porque son obsoletos.

Tu código quedaría entonces así:

<div class="embed-responsive embed-responsive-16by9 mx-auto" style="width: 400px;">

  <?php

        $sql = "SELECT enlace_spotify FROM listas WHERE ano = $recopilatorio";
        $resultados = mysqli_query($conexion, $sql);

        while($fila = mysqli_fetch_assoc($resultados))
        {
            $enlace_spotify = $fila['enlace_spotify'];

            echo '<iframe src="'.$enlace_spotify.'" height="840" allow="encrypted-media"></iframe>';
        } 

        mysqli_close($conexion);

    ?>

</div>

Actualización:

Como mencionas en los comentarios, tienes dos columnas y en la columna derecha tienes el iframe. Deberías hacer esto, explico el código en los comentarios del mismo:

<!-- Contenedor principal -->
<div class="container">

  <!-- Crea columnas como filas -->
  <div class="row">

    <!-- Columna izquierda -->
    <div class="col-md-6 col-sm-12">
      IZQ
    </div> <!-- Cierre columna izquierda -->

    <!-- Columna derecha -->
    <div class="col-md-6 col-sm-12">
      DER

      <!-- Abre embed -->
      <div class="embed-responsive embed-responsive-16by9 mx-auto" style="width: 400px; height: 840px;">



        <?php

        $sql = "SELECT enlace_spotify FROM listas WHERE ano = $recopilatorio";
        $resultados = mysqli_query($conexion, $sql);

        while($fila = mysqli_fetch_assoc($resultados))
        {
            $enlace_spotify = $fila['enlace_spotify'];

            echo '<iframe src="'.$enlace_spotify.'" allow="encrypted-media"></iframe>';
        } 

        mysqli_close($conexion);

    ?>

      </div> <!-- Cierra embed -->

    </div> <!-- Cierra columna derecha -->

  </div>  <!-- Cierra row -->

</div> <!-- Cierra container -->

Puedes ver un ejemplo funcionando en Codepen.

8
  • La verdad es que no me ha funcionado; este div forma parte del body de la página, que está dividido en dos col (ésta ocuparía la mitad derecha). Al hacer los cambios que propones el iframe pasa a ocupar toda la columna, tanto en ancho como en largo, y además la propia columna se estrecha un poco y ya no ocupa el 50 % del body. Yo querría que manteniendo las medidas que tienen ahora todos los elementos, el iframe simplemente se situase centrado. Commented el 14 jun. 2019 a las 15:43
  • 2
    Esa información no la tenías en tu pregunta. Voy a replantear mi respuesta en un momento para acercarme a lo que tienes. Sólo como duda, mi código usa la versión 4.3 de Bootstrap, estás usando la misma? Commented el 14 jun. 2019 a las 16:07
  • Otra pregunta, me dices que tienes dos columnas en tu body, algo así como dos col-6 y en la columna derecha tienes el iframe; suponiendo que la página tenga 1200px de ancho, la col derecha ocupará 600px aprox y dentro quieres agregar el iframe con 400px de ancho. ¿Qué pasará cuando la pantalla se reduzca? ¿Has pensado en este comportamiento? Commented el 14 jun. 2019 a las 16:12
  • Ya, perdona, pensé que al ser algo interno del div no haría falta tener en cuenta otras consideraciones. Por cierto, una pena que el align esté obsoleto, porque es una solución redonda. Con respecto a Bootstrap, le he enlazado la versión 4.1.3, pero porque era la que tenía en un ejercicio que hice hace ya más de medio año; no tengo problema en cambiarla. Commented el 14 jun. 2019 a las 16:48
  • 1
    @Optigan Acabo de actualizar mi respuesta, todo ese código debería estar dentro de main. Me avisas cómo te va. Commented el 14 jun. 2019 a las 17:55

Tu Respuesta

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

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