Source

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-itemcando 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-responsiverelació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.

<!-- 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>