Incrusta

Crea incrustacións de vídeos ou presentacións de diapositivas con resposta 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. 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.scssde , pode cambiar as relacións de aspecto que quere usar. Aquí tes un exemplo da $embed-responsive-aspect-ratioslista:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;