0

Estoy intentando poner un vídeo de youtube y hacerlo responsive con el código de Bootstrap como aparece aquí: Embeds.

El caso es que yo lo tengo dentro de un tab de bootstrap, y cuando le doy a la pestaña para mostrar el vídeo, este no aparece, ni siquiera ocupa espacio..

<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</div>

¿Qué se me está pasando?

2
  • 1
    Armé un snippet de Codepen con tu código y con el ejemplo básico de pestañas de Bootstrap 4 (de hecho el código del .tab-pane que tienes en tu pregunta, pertenece al segundo elemento en el contenedor .tab-content en el ejemplo que se muestra), y a juzgar por ello, no pasa lo que describes. ¿Puedes poner todo el código de pestañas para verlo más en detalle? (esto es, pestañas y contenido) el 14 nov. 2019 a las 0:04
  • Tambien puedes revisar la consola del navegador a ver que puede estar pasando con los elementos. el 14 nov. 2019 a las 19:11

1 respuesta 1

0

En cuanto a los estilos, si pones ese mismo código sin cargar bootstrap si aparece.

Con bootstrap 4 (sólo el CSS) ya no se ve, en el inspector de propiedades, sobre el contenedor principal se esta aplicando:

.fade:not(.show) {
    opacity: 0;
}

ese estilo impide que se vea tu vídeo. Podrías reescribirlo, para que aparezca:

.fade:not(.show) {
    opacity: inherit;
}


Nota: no se si cargas también el JS de bootstrap y si esto le afecta o tienes otros estilos, anidamientos que lo hagan, con ese código, la solución funciona, es decir que el vídeo o al menos su imagen de cubierta aparece, que no se reproduce.


Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style type="text/css">
    .fade:not(.show) {
        opacity: inherit;
    }
</style>

</head>
<body>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <h3> Prueba </h3>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
        </div>
    </div>
</body>
</html>

    

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.