Incrusta
Crea insercións de vídeos ou presentacións de diapositivas sensibles en función do ancho do pai creando unha relación intrínseca que se escala en calquera dispositivo.
Sobre
As regras aplícanse directamente aos elementos <iframe>
, <embed>
, <video>
, e <object>
; opcionalmente use unha clase descendente explícita .embed-responsive-item
cando quere facer coincidir o estilo doutros atributos.
Pro-Tip! Non é necesario que inclúas frameborder="0"
nas túas <iframe>
s xa que o anulamos por ti.
Exemplo
Envolve calquera incrustación como un <iframe>
nun elemento pai cunha .embed-responsive
relación de aspecto. Non .embed-responsive-item
é estrictamente obrigatorio, pero recomendámolo.
<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>
Relacións de aspecto
As relacións de aspecto pódense personalizar con clases modificadoras. De forma predeterminada, proporciónanse as seguintes clases de ratio:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Dentro _variables.scss
de , pode cambiar as relacións de aspecto que quere usar. Aquí tes un exemplo da $embed-responsive-aspect-ratios
lista:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;