Ingesloten

Maak responsieve insluitingen voor video's of diavoorstellingen op basis van de breedte van de ouder door een intrinsieke verhouding te creëren die op elk apparaat kan worden geschaald.

Over

Regels worden direct toegepast op <iframe>, <embed>, <video>, en <object>elementen; gebruik optioneel een expliciete afstammelingsklasse .embed-responsive-itemwanneer u de styling voor andere attributen wilt matchen.

Pro-tip! U hoeft deze niet frameborder="0"in uw <iframe>s op te nemen, omdat we die voor u overschrijven.

Voorbeeld

Wikkel elke insluiting zoals een <iframe>in een bovenliggend element in met .embed-responsiveen een beeldverhouding. Het .embed-responsive-itemis niet strikt vereist, maar we moedigen het aan.

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

Lengte-breedte verhoudingen

Beeldverhoudingen kunnen worden aangepast met modificatieklassen. Standaard zijn de volgende verhoudingsklassen voorzien:

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

Binnen _variables.scsskunt u de beeldverhoudingen die u wilt gebruiken wijzigen. Hier is een voorbeeld van de $embed-responsive-aspect-ratioslijst:

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