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