Video receptivo o presentación de diapositivas incrustadas en Bootstrap con ejemplos

Bootstrap permite crear incrustaciones de presentaciones de diapositivas o videos receptivos en función del ancho de la pantalla o del elemento principal mediante la creación de una proporción nativa que se escala con el dispositivo. Mediante el uso de incrustaciones de diapositivas o videos receptivos, el contenido se puede escalar automáticamente según el tamaño de la pantalla o el elemento contenedor principal, lo que hace que la interfaz de usuario sea más receptiva.

Bootstrap proporciona una clase llamada embed-responsive para crear incrustaciones receptivas. Esta clase se asigna al padre que incluye cualquiera de los siguientes elementos de incrustación: <iframe>, <embed>, <video> y <object>.

Opcionalmente, junto con la clase embed -responsive, se puede usar una clase más embed-responsive-item con los elementos incrustados.

Bootstrap también proporciona algunas clases de modificadores para ajustar la relación de aspecto de los elementos:

  • incrustar-responsive-16by9
  • incrustar-responsive-21by9
  • incrustar-responsive-1by1
  • incrustar-responsive-4by3

El siguiente programa ilustra la clase incrustada que responde :

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      
    <title>
        Responsive Video
    </title>
</head>
  
<body>
    <div class="embed-responsive 
                embed-responsive-21by9">
        <iframe class="embed-responsive-item" 
                src="https://www.youtube.com/embed/HMAwoMt3kek" 
                allowfullscreen>
        </iframe>
    </div>
</body>
</html>                    

Salida :

Publicación traducida automáticamente

Artículo escrito por MayankKhare y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *