Incorporações

Crie vídeos responsivos ou apresentações de slides com base na largura do pai, criando uma proporção intrínseca que pode ser dimensionada em qualquer dispositivo.

Sobre

As regras são aplicadas diretamente aos elementos <iframe>, <embed>, <video>e <object>; opcionalmente, use uma classe descendente explícita .embed-responsive-itemquando quiser combinar o estilo de outros atributos.

Dica profissional! Você não precisa incluir frameborder="0"em seus <iframe>s, pois substituímos isso para você.

Exemplo

Envolva qualquer incorporação como um <iframe>elemento pai com .embed-responsivee uma proporção. O .embed-responsive-itemnão é estritamente necessário, mas nós o incentivamos.

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

Proporções

As proporções podem ser personalizadas com classes modificadoras. Por padrão, as seguintes classes de proporção são fornecidas:

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

Em _variables.scss, você pode alterar as proporções que deseja usar. Veja um exemplo da $embed-responsive-aspect-ratioslista:

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