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-item
quando 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-responsive
e uma proporção. O .embed-responsive-item
nã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-ratios
lista:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;